Las fuentes de iconos (Icon Fonts)

Las fuentes de iconos o fuentes de símbolos, han sido, y son de gran utilidad para un montón de proyectos; incluyen desde iconos de redes sociales a flechas y glifos. Todo lo que se necesita para manejarlos es CSS (y mejor si es la versión 3).

En la actualidad no se puede predecir ni el ancho ni la altura con la que serán vistas nuestras paginas web, y por otro lado, los iconos,(que hasta ahora), han sido imágenes, (con mucha frecuencia), aparecen pixelados al perder definición por mostrarse en cualquier pantalla (y con resoluciones) distinta(s) a la que originalmente fueron pensados y diseñados

Para resolver este 'problemilla' están apareciendo unas nuevas fuentes de iconos que están compuestas de gráficos vectoriales. Sus principales ventajas son:

• Se ven tan nítida y claramente como el texto en cualquier pantalla.
• Todos los navegadores web, incluso IE6, tienen la capacidad de manejar fuentes incrustadas en una página HTML.
• Pueden modificarse sobre la marcha a través de CSS. Cambiar la escala, cambiar el color, añadir una sombra etc.
• Como son vectoriales, se ven muy bien en densidades de píxeles más altas, como las que se encuentran en las pantallas "Retina display" de Apple.
• Sólo se necesita una petición HTTP para todos los iconos. No es necesario utilizar ningún tipo de trucos difíciles para ajustar iconos como sprites o sustitución de la imágenes.

Los sitios de referencia más populares, serán (probablemente) IcoMoon y Fontastic, que permiten al usuario seleccionar entre cientos (sino miles) de posibles iconos y crear y descargar esa fuente en cuestión de segundos. Además, es aconsejable consultar el exhaustivo artículo de Chris Coyer (CSS Tricks)  " The Big List of Flat Icons & Icon Fonts " , donde se encuentra una lista muy extensa de enlaces y muestras de iconos listos para usarse en cualquier sitio.