Crea tus propios Icon Fonts en Illustrator y úsalos en CSS3

Los IconFonts o fuentes de iconos son fuentes tipográficas optimizadas para la web, que podemos usar en nuestros desarrollos y así optimizar el tiempo de carga y rendimiento de una página.

¿Por qué es importante usar Iconfonts?

La tipografía, es lo primero que carga los navegadores al momento de entrar a un sitio,ya que están optimizados para cargar los elementos mas ligeros pensando en Mobile First.

En este tútorial te enseñaremos a crear tus propias fuentes de iconos desde Illustrator, para después, puedas exportarlas a SVG (scalable Vector Graphics), y aplicarlas en todos tus diseños mediante CSS3.

Creando nuestro primer icono en Illustrator

Antes de crear un IconFont debes tener en cuenta cuales y cuantos vas a utilizar en tu sitio web, para crear toda la librería de una sola vez, esto nos ayuda a la hora de diseñar, ahorrando tiempo y optimizando el proceso.



Cuando ya tengas claro cuales son los IconFonts que vas a crear, puedes empezar a diseñarlos, en ello entra Illustrator. Debes tener en cuenta que a la hora de exportar los iconos debes hacerlo de manera independiente, siendo por cada mesa de trabajo y por separado, seleccionando el rango de la mesa de trabajo que se desea exportar.

Exportando nuestros iconos a SVG

Nuestros iconos deben ser reconocidos por los diferentes navegadores. Los formatos que reconocen los navegadores son: EOT, WOFF, TTF y SVG, formatos que son válidos para que la tipografía se muestre de manera correcta en nuestros sitios web. Para exportar los iconos debes ir a:

Archivo -> Guardar Como -> SVG ( Le damos OK y automáticamente, nos va a generar un archivo con la extensión .svg)

Optimizando nuestra IconFonts

Para poder utilizar nuestros IconFonts no basta solo con exportarlas a SVG, lo que vamos a hacer es aplicarlas mediante CSS3 para que pueda observarse en nuestro sitio web.

Para que podamos utilizar nuestra fuente de iconos en CSS3 debemos importarla con la ayuda de una herramienta web, en este caso usaremos una muy chévere y fácil de usar:http://icomoon.io/app/. Esta aplicación web nos permite cargar todos nuestros archivos SVG y posteriormente descargarlos dentro de una carpeta con las extensiones .eot, .woff y .ttf como lo vimos anteriormente.



Para cargar nuestros IconFonts, solo debemos seleccionar el botón de “Import icons” y así, nuestra aplicación séra capas de leer los archivos .svg para poder importarlos como una librería nueva dentro de nuestro CSS.



Cuando importemos nuestros archivos desde la aplicación, verán que ya está lista para descargar, solo debemos seleccionarla:

Descargando nuestros archivos

Cuando vayamos a descargar los archivos debemos tener en cuenta lo siguiente, icomoon nos genera un código unicode por cada icono, este es el valor vamos a utilizar a la hora de aplicarla en nuestra hoja de estilos, el código que se genera no reemplazara ningún otro codigo unicode de una letra o signo por defecto (como los signos de interrogación o tildes.)

¿Cómo aplicar IconFonts con CSS?

Cuando descargamos nuestros archivos, nos crea una carpeta con los siguientes archivos y subcarpetas.



El archivo que realmente nos importa se llama: “style.css” , que se encuentra en la carpeta llamada: “fonts”, este es el único archivo que necesitamos para poder usarlo en nuestro CSS. El archivo “style.css” tiene la siguiente composición:



El archivo “style.css” que se generó, nos crea una fuente con un nombre propio, el cual por medio de: @font-face importa los archivos con las diferentes extensiones para que puedan ser reconocidas, incluye por defecto los llamados necesarios para consumirlos de inmediato.

Después debemos usar selectores de CSS para indicar en nuestro HTML el lugar correspondiente a nuestro icono, ademas de indicarle cual es la clase equivalente a ese icono. Al final se puede ver que cada icono tiene un nombre y un “content”, esta es la manera en que CSS renderiza el icono. Como un tip, hay que tener en cuenta que, al momento de usar pseudo-elementos como :after o :before siempre debe haber un "content" para que el navegador lo pueda reconocer.

Aplicando las clases CSS en nuestro HTML

Lo primero que deben hacer es llamar el archivo style.css en nuestro documento HTML. De esta manera podremos utilizar las clases de CSS que la aplicación generó para cada icono.



Para poder visualizar un icono, debemos crearle la clase específica a cada párrafo o línea de texto, en la que queremos introducir el icono. Y lo mejor es que al ser una "fuente", le podemos aplicar un estilo a cada icono por separado, como size, color o margin.



Y así es como podemos aplicar nuestras fuentes de iconos personalizadas a todos nuestras aplicaciones y diseños que vayamos a realizar en un futuro,ademas de que mejoramos la velocidad de carga y le damos un estilo mucho más agradable que el hecho de utilizar imágenes que le suman peso y a la final no se ven tan bien.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.