Icon fonts: diseño web con pictogramas vectoriales

Los iconos son una parte fundamental de toda página web: desde la lupa que aparece dentro del recuadro de búsqueda de un blog o el carrito de la compra en la parte superior derecha de una tienda online hasta el sobre junto a una dirección de correo electrónico. La función principal de los iconos es orientar a los usuarios e indicar funciones de algunos elementos y para completar procesos sin necesidad de utilizar palabras. Cada vez es menos común que los iconos sean integrados como mapas de bits o sprites CSS. Ahora, los desarrolladores web utilizan los conocidos icon fonts, es decir, fuentes que no están compuestas por letras, sino por iconos vectoriales. 

A diferencia de las representaciones gráficas complejas compuestas por píxeles en un mapa de bits, los iconos vectoriales son escalables, no pierden su calidad y sus archivos son más pequeños que los de los iconos en mapa de bits. Además, las fuentes de iconos se pueden configurar individualmente a través de CSS (Cascading Style Sheets). Gracias a su carácter escalable, los iconos vectoriales son visualizados perfectamente y con nitidez en pantallas de gran tamaño y resolución, a diferencia de los gráficos en mapa de bits en un solo color (CSS3 permite degradados). Para utilizar icon fonts es necesario integrar la fuente completa, incluso cuando solo se utiliza un icono. En Internet se encuentran numerosos proveedores que ofrecen iconos vectoriales gratis, aunque también es posible crear fuentes de iconos personalizadas.

Por lo general, un desarrollador web no necesita utilizar todos los pictogramas de una fuente de iconos. En muchos casos, es posible combinar iconos de diferentes páginas web, por ejemplo, con la ayuda de generadores de fuentes web como Fontello, fontastic.me o IcoMoon App. Con la creación de una icon font propia solo se incluirán en la web aquellos iconos que realmente sean visibles, lo que tendrá un impacto positivo en la reducción de los tiempos de carga y optimizará la velocidad de navegación de una página web.

Generalmente, las icon fonts se definen con la ayuda de una clase CSS en el código fuente HTML. Para ello, es necesario incluir la respectiva fuente de iconos en la cabecera del documento HTML. Algunos proveedores han preparado incluso un archivo CSS estándar para facilitar tal labor. Siempre y cuando la fuente sea compatible, también es posible integrarla usando Bootstrap, el framework en CSS. Para profundizar en el proceso de integración de una fuente de iconos como clase en CSS en HTML, visita el artículo con el ejemplo de Font Awesome.

Las fuentes de iconos ofrecen grandes posibilidades de configuración, debido a que se cargan en su propia hoja de estilo (Stylesheet) y se recuperan mediante clases CSS predefinidas. A diferencia de los archivos de imagen basados en píxeles, la configuración de los pictogramas vectoriales puede ser definida e integrada directamente en el código CSS. Esto les permite a los desarrolladores web personalizar características como el tamaño, el color o la opacidad de los iconos dependiendo del diseño de la página web. Además, también es posible diseñar iconos con texturas o efectos de sombra.