En el diseño web y de aplicaciones es imprescindible el uso de íconos, pues además de añadir estética también aportan usabilidad, ya que para un usuario es más fácil identificar el ícono de un sobre, y asociarlo con un correo, que buscar "al ojo" la palabra correo dentro de la pantalla.
Tradicionalmente, los iconos se han resuelto con imágenes en formato gif (hasta IE6, posteriormente se usa png) y en el diseño de páginas web una solución eficiente es el uso de sprites. Un sprite es una imagen que incluye no solo iconos sino también logotipos y otros elementos visuales. Luego con css se posiciona corectamente cada icono según se necesite.
Por ejemplo, el siguiente es el sprite que usa YouTube:
Si bien los sprites mejoran el rendimiento de la página (pues se carga una sola imagen y no decenas) su mantenimiento puede ser pesado, ya que los tamaños de cada icono están definidos en pixeles y variarlos requiere pasarlos por un editor de imágenes (como Photoshop o Illustrator) y luego hacer muchos cambios en el css. La alternativa es cargar imágenes individuales pero se sacrifica el rendimiento. Los icon fonts nos solucionan los dos problemas fácilmente.
¿Que son los icon fonts?
Puede que hayas visto en Word algunas fuentes que en vez de letras en la pantalla muestran símbolos. Por ejemplo, esta es una muestra escrita en Word con la fuente Webdings:
Esto nos da idea de cómo funcionan los icon fonts. Son fuentes que en vez en vez de letras usan símbolos. Si no se han usado siempre en diseño web es porque antes estábamos limitados a las fuentes que el usuario tenía instaladas en su sistema, pero hoy en día los navegadores ofrecen soporte para cualquier tipo de fuente (usando la regla css “@font-face”), por lo que el uso de icon fonts se ha masificado.
¿Como funcionan los icon fonts?
Lo primero es contar con la tipografía que contiene a estos iconos (y en varios formatos para asegurar que se vea en todos los navegadores). Aparte de la tipografía necesitamos el css para definir en qué circunstancia se mostrarán los iconos. El método en el que todos los proyectos han coincidido es usar el pseudo elemento :before de css para incluir los iconos con la propiedad content en unas clases determinadas.
Algo así:
.icon-facebook { content: “f”; }
Luego en el html:
<a class="icon-facebook" href="http://facebook.com">Siguenos en facebook</a>
Y si en la tipografía usada la letra f está asignada al icono de facebook, este se imprimirá en pantalla.
Otros proyectos no usan letras sino caracteres unicode. Por ejemplo, font awesome:
.fa-facebook:before { content: “\f230”; }
Luego en el html
<a class="fa fa-facebook" href="http://facebook.com">Siguenos en facebook</a>
Hay paquetes y generadores de icon fonts y cada uno trae sus propias instrucciones sobre las clases que hay que usar para añadir los iconos.
Paquetes de icon fonts
Existen paquetes que nos traen listas las familias de fuentes y el css listo. El más famoso es Font Awesome, un kit que trae más de 500 iconos con opciones muy diversas que incluyen tamaños, animaciones y efectos como rotación. Para mostrar un icono (despues de habler incluido los css y fuentes) es la siguiente
<i class="fa fa-facebook"></i> Síguenos en Facebook
En su página web recomiendan crear un elemento vacio con la clase “fa” y añadir la clase correspondiente al icono, que es “fa-xx” (donde xx es el nombre del icono). Puedes ver los nombres de todos los iconos disponibles en http://fortawesome.github.io/Font-Awesome/cheatsheet/ (entre corchetes aparecen los equivalentes pero en formato unicode).
El framework Zurb Foundation también tiene un completo set de icon fonts que puede descargarse por separado, asi que aunque no usemos Foundation podremos usar sus iconos. Una vez añadido el css y las fuentes a nuestro proyecto, basta usar una clase “fi-xx” para mostrar un icono (cuyo nombre se remplaza por “xx”). Todos los nombres los pueden encontrar por aquí: http://zurb.com/playground/foundation-icon-fonts–3
Generadores de icon fonts
Los paquetes de icon fonts son buenos porque traen todo listo para trabajar. Sin embargo, puede pasar que justo el ícono que necesitamos no esté disponible o que solo necesitemos 10 iconos y no 500 que al final le añaden peso innecesario a la página, haciéndola más lenta de cargar. Para estos casos existen generadores que nos permiten elegir desde varias colecciones los iconos que necesitemos. Podemos personalizar los nombres de las clases (generalmente son “icon-xx”). Los más conocidos son Icomoon y Fontello.
Fontastic - el mejor generador de icon fonts (el que usamos en ED)
En principio, Fontastic es un generador tal como Icomoon o Fontello. Pero tiene algunas diferencias que lo hacen el mejor:
- Puedes crear varias familias de iconos y tenerlas almacenadas en tu cuenta (sin necesidad de descargarlas).
- Puedes sincronizar tus sets de iconos en la nube y actualizarlos cada vez que lo requieras (añadiendo iconos, quitándolos o editando clases), así con una sola edicion en Fontastic, los cambios se reflejarán en tu proyecto automáticamente.
- Al sincronizar desde la nube no es necesario descargar nada, solamente añadimos el url que nos proporciona fontastic a nuestro proyecto y listo.
¿Cómo crear nuestros propios icon fonts?
En algunos casos necesitaremos crear nuestros propios icon fonts. Es bastante sencillo, basta crear nuestros iconos en un programa vectorial (como Illustrator o Inkscape) y guardarlos como svg. Posteriormente los subimos a Fontastic, que se encargará del trabajo pesado (convertirlos a los formatos necesarios y generar el css).
Si usamos Illustrator CC tenemos la extensión FlatIcon que incluye un panel desde el que podemos buscar entre más de 70mil iconos el que necesitemos. Así nos ahorramos el tiempo de dibujar el icono, y solo buscamos el que necesitamos, lo guardamos en svg y lo añadimos a Fontastic. Listo.
Para Photoshop existe el plugin Glifo (de pago) que exporta nuestras capas y genera los icon fonts listos para web (con el formato correcto y el código css).
Conclusión
Los icon fonts son una excelente manera de tener iconos en nuestros proyectos sin utilizar imágenes en tu página web o aplicación. Además que puedes controlar sus tamaños, color y efectos solo con css y sin perder calidad (ya que son vectoriales). Y como hemos mencionado, te recomendamos usar fontastic porque no necesitas descargar nada, solamente añadir el link al css en tu web (como Google Fonts).
Y tu, ¿ya usas icon fonts en tus proyectos? y si la respuesta es sí, ¿cuál usas? Menciónalo en los comentarios.
Te dejamos el video en el que vemos más a fondo como trabajar con web icon fonts.