Icon fonts: diseño web con pi­c­to­gra­mas ve­c­to­ria­les

Los iconos son una parte fu­n­da­me­n­tal 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 ele­c­tró­ni­co. 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 in­te­gra­dos como mapas de bits o sprites CSS. Ahora, los de­sa­rro­lla­do­res web utilizan los conocidos icon fonts, es decir, fuentes que no están co­m­pue­s­tas por letras, sino por iconos ve­c­to­ria­les. 

A di­fe­re­n­cia de las re­pre­se­n­ta­cio­nes gráficas complejas co­m­pue­s­tas por píxeles en un mapa de bits, los iconos ve­c­to­ria­les son es­ca­la­bles, 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 co­n­fi­gu­rar in­di­vi­dua­l­me­n­te a través de CSS (Cascading Style Sheets). Gracias a su carácter escalable, los iconos ve­c­to­ria­les son vi­sua­li­za­dos pe­r­fe­c­ta­me­n­te y con nitidez en pantallas de gran tamaño y re­so­lu­ción, a di­fe­re­n­cia de los gráficos en mapa de bits en un solo color (CSS3 permite de­gra­da­dos). Para utilizar icon fonts es necesario integrar la fuente completa, incluso cuando solo se utiliza un icono. En Internet se en­cue­n­tran numerosos pro­vee­do­res que ofrecen iconos ve­c­to­ria­les gratis, aunque también es posible crear fuentes de iconos pe­r­so­na­li­za­das.

Por lo general, un de­sa­rro­lla­dor web no necesita utilizar todos los pi­c­to­gra­mas de una fuente de iconos. En muchos casos, es posible combinar iconos de di­fe­re­n­tes páginas web, por ejemplo, con la ayuda de ge­ne­ra­do­res 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 op­ti­mi­za­rá la velocidad de na­ve­ga­ción de una página web.

Ge­ne­ra­l­me­n­te, las icon fonts se definen con la ayuda de una clase CSS en el código fuente HTML. Para ello, es necesario incluir la re­s­pe­c­ti­va fuente de iconos en la cabecera del documento HTML. Algunos pro­vee­do­res han preparado incluso un archivo CSS estándar para facilitar tal labor. Siempre y cuando la fuente sea co­m­pa­ti­ble, también es posible in­te­grar­la usando Bootstrap, el framework en CSS. Para pro­fu­n­di­zar en el proceso de in­te­gra­ció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 po­si­bi­li­da­des de co­n­fi­gu­ra­ción, debido a que se cargan en su propia hoja de estilo (St­y­le­sheet) y se recuperan mediante clases CSS pre­de­fi­ni­das. A di­fe­re­n­cia de los archivos de imagen basados en píxeles, la co­n­fi­gu­ra­ción de los pi­c­to­gra­mas ve­c­to­ria­les puede ser definida e integrada di­re­c­ta­me­n­te en el código CSS. Esto les permite a los de­sa­rro­lla­do­res web pe­r­so­na­li­zar ca­ra­c­te­rí­s­ti­cas como el tamaño, el color o la opacidad de los iconos de­pe­n­die­n­do del diseño de la página web. Además, también es posible diseñar iconos con texturas o efectos de sombra.