ICON FONTS ¿Cuál familia elijo?

¡Hola!

Este post se va a enfocar en detallar las características de las principales familias de icon fonts que existen en la Web pero antes debemos saber qué es un icon font? son íconos utilizados mediante fuentes tipográficas, ya sean letras y números o caracteres Unicode.
Debido a la mejora en la calidad de los monitores se esta dejando de lado el uso de sprites de iconos e imágenes sueltas y se ha incrementado el uso de icon fonts en paginas web y aplicaciones. Sin embargo escoger la familia adecuada de acuerdo al estilo y necesidades de tu pagina requiere conocimiento previo. Es así que en este breve benchmark te muestro las familias mas conocidas junto a las características mas relevantes que pueden ayudarte a la hora de seleccionarlas y desde luego el link de descarga asociado.

Icon Font Actualizacion Cantidad de Glifos Precio Licencia Tipo de Descarga Hojas de estilo Permite contribuciones Link
Font Awesome 605+ Gratis MIT Licensed Inmediata Si, de hecho cuenta con estilos de animación
Material Design Icons 733 Gratis MIT Licensed Inmediata
Ionicons 1475+ Gratis MIT Licensed Inmediata
Icomoon 490 Pack Gratis – Pack con costo GPL / CC BY 4.0 Previo registro
Typicons 336 Gratis free for commercial use inmediata
Foundation Icon Fonts 336 Gratis free for commercial use inmediata
Open Iconic 223 Gratis free for commercial use inmediata
Rondo 40 Gratis free for commercial use inmediata
Meteocons 41 Gratis free for commercial use inmediata
Soicon 105 Gratis SIL Open Font License inmediata
Vaadin Icons 530 Gratis CC-BY license inmediata
Batch 300+ Pack Gratis – Pack con costo free for commercial use inmediata
Fontelico 34 Gratis SIL licence Descarga de Git
Zocial 103 Gratis free for commercial use Descarga de Git
State Face 152 Gratis free for commercial Inmediata
Open Web Icons 219 Gratis free for commercial Inmediata
Sosa 160 Gratis free for commercial Inmediata
Raphaël Icon-Set 160 Gratis free for commercial Inmediata
JustVector 151 Gratis free for commercial Inmediata
Web Symbols 100+ Gratis free for commercial Inmediata
pictonic 332 Gratis GPL / CC BY 4.0 Previo registro
Octicons 176 Gratis free for commercial Inmediata

Mis recomendaciones

  • Utilizar un Icon Font es un trabajo que requiere conocimientos en css y html de nivel intermedio. Si no es una familia tan completa como la de Font Awesome que te ofrece incluso hojas de estilo que personalizan tamaños y animación en los iconos, es necesario que crees tu propia librería de estilos para poder personalizar los iconos. Aquí te dejo el link a un artículo de utilidad si quieres conocer más al respecto.
  • Al ser archivos de fuentes (eot, otf, ttf, woff) es necesario tener moderación al utilizar demasiadas familias en un mismo proyecto. Mi recomendación es utilizar una o dos familias que combinen visualmente (considerando el peso, consistencia y estilo de los glifos). Por ejemplo, los glifos de Bootstrap son bastante compatibles visualmente con los de Font Awesome, de hecho estos últimos fueron diseñados para completar a la familia de Bootstrap pero funcionan bien con otros frameworks.
  • Si has sido bastante curioso, habrás notado que varias familias se especializan en temas específicos como los State Face (mapas de los estados de EEUU) o los Zocial (iconos con los logos de las principales redes sociales), Estas familias son bastante compatibles ya que puedes usarlas a manera de recurso genérico.

Algo más

Para que tengas una mejor comprensión acerca de los beneficios de usar Icon Fonts te dejo este articulo de CSS-TRICKS, en el que se muestran interesantes ejemplos en vivo y directo.
También de CSS-TRICKS puedo compartirte este interesante artículo en el que se incluyen familias no gratuitas, si tienes la posibilidad puedes utilizarlas.
Finalmente dejo el post abierto a la siguiente pregunta: ¿Conoces otras familias de Icon fonts? Si es así, compártenos el link así completamos esta galería.




Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Posts de Prensa Recientes