Las fuentes de iconos están de moda en este momento. Hacen que sea tan fácil incrustar gráficos vectoriales en una página que los diseñadores de todo el mundo los consideran la principal forma de manejar los iconos.
El problema, por supuesto, es que necesitamos más control sobre los iconos que incrustamos. A veces extraemos de una variedad de fuentes, incluido nuestro propio trabajo, y necesitamos una buena manera de ponerlo todo junto. Introduzca los generadores de fuentes de icono. Síguelo mientras comparamos algunos de nuestros favoritos.
¿Por qué un generador?
La desventaja de usar una fuente de íconos es que estás limitado por los íconos que están en el conjunto que descargaste. Si desea incluir tres iconos diferentes de tres conjuntos diferentes, tendrá que cargar tres fuentes diferentes, lo que en realidad podría significar la carga de cientos de iconos que simplemente no necesita.
Obviamente, si va por un sitio pobre y sin recursos superfluos ni retrasos de carga innecesarios, esta no es la mejor manera de incrustar iconos. Aquí es donde entran las fuentes de iconos personalizados. En este escenario, toma tres iconos, tíralos en una única fuente personalizada pequeña e incrusta eso en tu página.
Desafortunadamente, no todos tenemos el conocimiento o los recursos para construir nuestras propias fuentes. Sin embargo, no se preocupe, estos generadores de fuentes de iconos personalizados lo tienen cubierto. Ya sea que desee usar sus propios íconos o aprovechar los conjuntos de íconos existentes, hay una herramienta a continuación para hacer el trabajo.
Fontello
El primer generador que vamos a revisar es Fontello. Esta aplicación es súper elegante, muy fácil de usar y tiene once conjuntos de iconos completamente gratuitos, entre ellos Font Awesome e Iconic. No hay miles de íconos para elegir, pero definitivamente hay suficientes para que puedas encontrar lo que estás buscando.
Hablando de encontrar lo que estás buscando, esa tarea se simplifica al actualizar instantáneamente la función de búsqueda en la parte superior de la página. Me encanta el filtro en vivo aquí, que es mucho mejor que esperar a que se cargue una nueva página con los resultados de búsqueda.
Elegir iconos para tu fuente personalizada es tan fácil como hacer clic en ellos. Una vez que haya encontrado y seleccionado los íconos que desea incluir, salte a la segunda pestaña donde puede cambiar los nombres de cada ícono. Esas pequeñas opciones de personalización como esta hacen que Fontello sea tan bueno.
El siguiente paso es revisar los códigos de edición? pestaña para que pueda personalizar los caracteres que están asociados con cada icono. Hacer esto es bastante fácil, simplemente use los campos provistos.
Después de completar los pasos anteriores, todos están listos para ir. Simplemente escriba un nombre de archivo y haga clic en el enlace de descarga para recibir su fuente personalizada.
Descargar
La descarga de Fontello incluye la friolera de catorce archivos repartidos en varias carpetas. La huella de cada archivo es pequeña, pero la gran cantidad de elementos que recibe puede parecer abrumadora para alguien que estaba buscando una solución simple. Dicho esto, es muy bueno tener un ejemplo en pleno funcionamiento para trabajar y han hecho un gran esfuerzo para asegurarse de que todo sea lo más compatible con el navegador.
IcoMoon
La próxima aplicación que vamos a echar un vistazo es IcoMoon. Honestamente, se parece mucho a Fontello, pero hay algunas diferencias clave que vale la pena examinar.
Al igual que con Fontello, puede navegar a través de los iconos desplazándose o usar la función de búsqueda integrada para encontrar algo específico.
Hay muchos más iconos disponibles de los que ves por defecto. Para ver el resto, pulsa la? Biblioteca? Botón cerca de la parte superior de la pantalla.
Esto lo llevará a una página que actualmente tiene dieciséis colecciones diferentes para elegir, muchas de las cuales son gratuitas, mientras que otras deben comprarse.
Importando Otros Recursos
Una de las mejores características de IcoMoon es la capacidad de importar otros recursos para incluir en su compilación personalizada. Puede cargar otras fuentes de iconos o incluso sus propios gráficos SVG personalizados. Esto hace de IcoMoon un recurso increíble para cualquier persona que quiera construir su propia fuente de ícono desde cero.
Generando la fuente
Una vez que haya seleccionado sus iconos, puede proceder a la descarga de su fuente a través del botón en la parte inferior de la página. También tenga en cuenta que tiene la opción de descargar los íconos como una imagen (generará una página de sprite).
Al igual que con Fontello, antes de la descarga, tiene algunas opciones para cambiar la configuración y la codificación de su fuente.
Descargar
La descarga aquí es considerablemente más pequeña que con Fontello. Sólo hay nueve archivos, cinco de los cuales son la fuente real. Básicamente, Fontello te da un montón de archivos CSS, mientras que IcoMoon lo condensa a uno. Esto hace que todo sea mucho más fácil de filtrar y la página de demostración también es un poco mejor.
Pictónica
El siguiente en nuestra lista es Pictonic. Para utilizar este sitio, debe registrarse para obtener una cuenta. A partir de ahí, obtienes tres opciones. Puede usar los íconos gratuitos, usar íconos pagados a una tarifa de $ 0.59 por ícono o recibir acceso ilimitado por $ 199.
Aquí vemos el mismo ejercicio anterior, utilice la función de búsqueda en vivo o navegue por los iconos disponibles desplazándose y haciendo clic en los que desee.
También hay un menú desplegable que le permite filtrar fácilmente los resultados por categoría. Esta es también una buena forma de ver los 320 iconos gratuitos (que en su mayoría son logotipos sociales y de software).
Descargar
Esta vez, realmente no veo ninguna opción para personalizar su descarga, simplemente hace clic en ¿Continuar? entonces? descargar? y usted recibe lo que resulta ser nuestra descarga más grande hasta ahora.
Con Pictonic, usted recibe automáticamente los archivos en casi todas las formas en que podría desearlos: archivos de fuentes, PNG y SVG. La cantidad de archivos que recibe depende de la cantidad de iconos que eligió.Me encanta tener todas estas opciones, pero me gustaría elegir lo que quiero y no quiero antes de la descarga.
Servidor Pictos
Guardé el valor atípico para el final. Pictos Server hace las cosas de manera bastante diferente a los otros sitios. En lugar de crear una fuente personalizada que descargue e incruste en su propio servidor, Pictos hospeda los íconos para usted. En general, se le conoce como "el Typekit de los iconos", que es una descripción decente de lo que puede esperar del servicio.
Por mi cuenta, actualmente hay alrededor de 338 iconos para elegir. Puedes adelgazar la oferta eligiendo uno de los conjuntos de Pictos o buscando algo específico.
Una vez que haya elegido los íconos, puede escribir los caracteres que desea que representen cada ícono. Desde aquí simplemente haga clic en "Generar código". botón, que le brinda un enlace de inserción CSS que simplemente descarga en su archivo.
Precios
Dado que Pictos es un servicio de alojamiento, obviamente hay una tarifa mensual. Los precios de los planes se establecen de acuerdo con las visitas a la página, comenzando con $ 0 hasta 25,000 visitas mensuales hasta $ 50 para hasta 4,000,000 vistas mensuales.
También es importante tener en cuenta que el plan gratuito parece estar limitado a doce iconos por fuente.
¿Cómo se comparan?
Obviamente, la respuesta a la pregunta de cuál es el mejor sitio? Depende de sus necesidades específicas. Cada sitio parece sobresalir a su manera. Si está buscando la solución más fácil, no puede vencer a Pictos Server. Realmente hay muy poco trabajo involucrado e incrustar la fuente del icono es muy fácil.
Si está buscando una tonelada de fuentes gratuitas sin las molestias de registrarse para obtener una cuenta, visite Fontello. Es un gran servicio con muchas opciones y es probable que sea todo lo que necesita.
En términos de características y opciones, IcoMoon es difícil de superar. Me encanta que te permita subir e integrar tu propio trabajo o incluso otras fuentes de iconos que hayas encontrado. También hay un montón de íconos gratuitos aquí e incluso algunos paquetes premium si realmente quieres hacer todo lo posible.
En general, Pictonic fue probablemente mi menos favorito del grupo. La selección de iconos gratis no fue tan buena y no tiene las opciones de personalización que tienen los otros servicios. Una cosa que me gusta de Pictonic es el sencillo modelo de precios para iconos premium: $ 0.59 por icono o $ 199 para acceso ilimitado. Agradable y sencillo!
¿Qué icono de generador de fuentes es tu favorito?
En general, vale la pena echarle un vistazo a estos cuatro servicios. Todos son realmente fáciles de usar y están llenos de valor.
Ahora que has visto mis pensamientos sobre estos cuatro generadores de fuentes, deja un comentario a continuación y cuéntame tus pensamientos. ¿Ha utilizado alguno de estos servicios en proyectos anteriores? Cual me recomiendan ¿Qué otras opciones hay por ahí que me perdí?