Uno de los recursos que usamos todos los desarrolladores para darle un poco de vistosidad a un sitio web son los iconos. Existen innumerables paquetes de iconos que pueden dar un toque ideal a tus trabajos. Sobre todo nos resultan útiles a los que somos más orientados a la programación y no tan creativos. Si me pidieran diseñar un icono, seguro que tardaría un buen rato y no me quedaría ni la mitad de bien de lo que se encuentra por ahí.

Seguro que en este sentido habrás buscado y usado decenas o cientos de packs con iconos en tus sitios y estarás familiarizado mayoritariamente con el uso de iconos mediante imágenes. Personalmente ya había oído hablar varias veces de las ventajas de usar fuentes tipográficas para mostrar los iconos en sitios web (en inglés se conoce como "icon fonts") y en principio parecía sonar bien.

Pues bien, en el último rediseño de un sitio web que estaba realizando he empezado a usar iconos de fuentes y quiero hablaros un poco sobre las ventajas que encuentro, así como algunos populares recursos que deberíais conocer. Simplemente empezar diciendo tajantemente que, para lo que a mi respecta, los iconos por medio de imágenes han pasado a la historia. No los volveré a usar a no ser que sea estrictamente necesario, decantándome sin duda por los icon fonts.

Qué son los icon-fonts

Los iconos por fuentes se implementan por medio de una tipografía especial, en la que en lugar de caracteres que representan letras tenemos caracteres que representan imágenes de diversas cosas. Seguro que ya has visto esos iconos en algún programa de diseño, pues siempre por defecto en los ordenadores tenemos alguna de esas fuentes con iconos (aunque las que sueles tener inicialmente te producen iconos un tanto feos).

En resumen, para usar los icon-fonts, en lugar de colocar un icono con una etiqueta IMG (o cualquier otra etiqueta añadiendo un background de imagen con CSS), colocarás un elemento cualquiera con un texto e indicarás que la fuente de ese elemento, que será tu tipografía con el juego de iconos deseados.

Incluso, gracias a las CSS y los pseudoelementos de estilo como :after y :before, podemos ahorrarnos tener que escribir ningún caracter para representar un icono, de modo que en el contenido de la web simplemente colocaríamos un elemento con una clase para indicar que dentro debe colocarse un icono.

<span class="icono-deseado"></span>

Con algo como eso conseguiríamos representar un icono, lo que nos ayuda a memorizar simplemente nombres de clases, y no caracteres, para representar el icono que deseamos.

Ventajas de los iconos por medio de tipografías

Lo más interesante de estos iconos no es que sean bonitos o feos, más o menos variados, sino el modo en el que nuestro flujo de trabajo resulta mucho más sencillo y ágil. Veamos algunas de las ventajas que deberían animarte a usar fuentes para tus iconos.

Evitar solicitudes al servidor
Generalmente los iconos por medio de imagen vienen en imágenes sueltas y para cada icono tienes que hacer una solicitud al servidor para traerte la imagen. Sabemos que las solicitudes HTTP en exceso es uno de los motivos por los que se ralentiza la carga de una página. Las fuentes van en un único archivo (el de la tipografía que cargas con CSS para tener soporte a esos iconos).

Evitar el uso de sprites
Generalmente usamos sprites CSS cuando queremos tener varios iconos en un sitio web, de modo que todos tus iconos están en una única imagen gráfica. Así, aunque tengas decenas de iconos, solo realizas una única solicitud al servidor para cargar todos los sprites. Esto está genial, solo que la creación de los sprites es laboriosa, así como su implementación. Las fuentes ya tienen "paquetizados" esos iconos, con lo que no necesitas gastar tu tiempo en hacer sprites.

Ampliar / reducir los iconos
Tus iconos en una imagen tienen un tamaño fijo. Si quieres que el icono sea mayor en una parte de la web y menor en otra, o si quieres que el tamaño de los iconos se adapte al tamaño de la pantalla del usuario (lo que se conoce como "responsive"), tienes que usar preferentemente dos o más imágenes distintas. Esto amplia la carga de la página y también tu trabajo para preparar iconos en varios tamaños. Las fuentes tipográficas son vectoriales, por lo que se pueden agrandar o reducir en su tamaño sin que pierdan calidad. Los iconos se pueden cambiar de tamaño con los atributos de CSS font-size, por lo que con una única fuente tendrás iconos de infinitos tamaños. Además, el tamaño de tus iconos se adaptará al tamaño de tu texto, sin que tengas que hacer nada.

Cambiar el color
Si quieres hacer variaciones de tus iconos, como cambios de color para usar en partes distintas de la página o secciones del sitio web también te ayudan las fuentes de iconos. Si usases imágenes, lo más normal es que te creases varias imágenes para cada una de esas variaciones del icono que necesitas. Con icon fonts podrás cambiar el color simplemente con el atributo "color" de CSS, asignando el RGB que necesites en cada lugar.

Agregar sombras u otros estilos CSS
Con text-shadow podemos agregar una sombra a un icono, de cualquier color y forma y crear diversos efectos que sería posible con imágenes solo a través de la creación de nuevas imágenes. Pero habría otros efectos CSS como resplandor, trazo, tachado, grosor, etc. que también serías capaz de implementar simplemente cambiando tus CSS.

Cambiar radicalmente de iconos
Si un día quieres cambiar de iconos radicalmente, aunque no es tan habitual, podría hacerse posible solo con cambiar la tipografía de tus iconos y automáticamente cambiaría el aspecto de todos los iconos de tu sitio. Imagina si los tuviéras en imágenes, con sprites. En ese caso sería posible cambiarlos solo con alterar tus CSS, pero te obligaría a genera de nuevo tus sprites.

Desventajas de las fuentes de iconos

Como todo en la vida, aunque algo nos solucione la vida, no podemos dejar de mirar algunas desventajas.

Iconos monocromáticos
Al ser fuentes, todo el icono tiene el mismo color. Es cierto que con CSS puedes cambiarlo y a veces será blanco y otras negro, o azul, pero todo el icono tendrá el mismo color. Por ejemplo en un icono con forma de flor no podrás tener los pétalos de un color mientras que el cáliz o pistilo de otro. Osea, los iconos de imágenes siempre podrán tener otro tipo de detalles que los hagan más espectaculares. Si queremos trabajar con varios colores en los iconos de fuentes lo podemos conseguir con sombras, por ejemplo, pero al final siempre van a tener una silueta de un único color.

Iconos iguales en todos los sitios web
Paquetes de iconos con imágenes hay miles, por lo que se hace fácil ser originales. Fuentes con iconos, por lo menos de momento, no hay tantas, por lo que tus iconos pueden ser los mismos que otros cientos de sitios que visitas.

Recursos para trabajo con fuentes de icono

Aquí quiero destacar un par de sitios que he usado para fuentes de iconos y que están evolucionando mucho, para dar soporte a más iconos y más usos.

Font-Awesome: http://fortawesome.github.io/Font-Awesome/
Como su nombre indica, es un asombroso conjunto de iconos, que nos viene a través de una tipografía. Pero yo más bien diría que es un framework completo para implementar iconos. Te ofrecen más de 400 iconos y una serie de CSS ya listos para que los puedas incorporar. Los estilos están pensados para que los puedas usar directamente sobre textos, listas, botones… y para realizar algunas implementaciones más revolucionarias como apilar iconos, unos encima de otros, para producir nuevos iconos compuestos. Es genial, te recomiendo probarlo, pues en minutos te adaptas a usarlos en un sitio web y te ahorran horas de retoques.

IcoMoon: https://icomoon.io/
Es más bien un conjunto de herramientas para implementar iconos por medio de fuentes. También es muy recomendable, sobre todo porque tienes disponibles varios paquetes de iconos, por lo que anulas el inconveniente de usar los mismos gráficos que otros sitios. Incluso puedes personalizar tu tipografía para que solo incluya aquellos iconos que vas a usar, lo que supone una optimización importante sin que tengas casi trabajo.

Bootstrap: http://getbootstrap.com/
El propio Bootstrap usa una librería llamada GLYPHICONS http://glyphicons.com/ para proveer de un paquete de iconos ya listos para usar. Además de cientos de clases y de modelos para implementar iconos en distintas interfaces gráficas.

En resumen

Si no sabías de las fuentes de iconos, son un recurso muy interesante para ocupar. Si ya las conocías pero aun no habías comenzado a usarlas, te animamos a ello. Con absoluta certeza te va a encantar la cantidad de trabajo que te ahorrarás y cómo mejora tu workflow en el uso de iconos.

A través de estos recursos comentados, que son geniales, y otros que sin duda encontrarás por Internet, podrás hacer que tus iconos además luzcan estupendamente y se adapten a la mayoría de tus necesidades.