icomoon: usar iconos como fuentes

1. Ingresamos a http://icomoon.io/app/ y seleccionamos los íconos que queremos: 



2. Presionamos el botón Font  para generar la fuente: 

:



3. Presionamos Download:



4. Al extraer los archivos, nos encontramos con estos:



license.txt: un archivo con la información de la licencia.
Ite-ie7.js: es para que funcione en navegadores menores a Internet Explorer 7.
Read Me.txt: un archivo con instrucciones.
Styles.css: archivo de estilos.

La fuente está creada con un div vacío y un atributo propio llamado data-icon y genera  un valor unicode para cada ícono:



En el archivo styles.css tenemos inicialmente el código que llama a cada archivo en la carpeta fonts y define otros parámetros:



Para las clases toman cada ícono y le define la fuente y otros parámetros:



Posteriormente, antes del contenido de la clase, agrega un content con la letra unicode correspondiente a cada ícono, como mostramos más arriba:

Antes de seguir:

¿Qué es un pseudo elemento?

Es un elemento propio creado mediante un atributo que se guarda en el archivo de estilos. Por ejemplo data-icon:



4. Siguiendo con el ejercicio, utilizaremos la carpeta fonts y el archivo styles.css y lo llevaremos a la carpeta de nuestra aplicación. Para convertir el .css a .styl: mediante el comando stylus -C style.css (si el watch está activado lo detenemos con ctrl+c):



5. Nos arroja un buen resultado, a excepción de @font.face que hay que corregirlo manualmente porque aparece undefined:



6. Corregimos agregando toda la orden de pre-render @font-face:



7. Ahora compilamos style.styl y quedaría así:



8. Renombraremos el archivo style.styl por iconos.styl. Compilamos todo en un sólo archivo: en es,ñm-mtilos.styl usamos el comando @import:



9. Ahora ejecutamos el comando para que compile y vea:



10. Ahora estilos.css nos queda así:



11. Sólo agregamos entonces la clase de cada ícono y podemos agregarle las propiedades que deseemos. Hay que recordar que debe ser manipulado como fuente.

Contenido creado por: