Icomoon: usar íconos como fuentes

Ingresamos a http://icomoon.io/app/ y seleccionamos los iconos que deseamosPresionamos el botón Font para generar la fuente:Presionamos DownloadAl extraer los archivos, nos encontramos con estos archivos:license.txt: Un archivo con la información de la licenciaIte-ie7.js: Es para que funcione en navegadores menores a Internet Explorer 7Read Me.txt: Un archivo con instruccionesStyles.css: Archivo de estilosLa fuente está creada con un div vacío y un atributo propio llamado data-icon y genera un valor unicode para cada icono:En el archivo styles.css tenemos inicialmente el código que llama cada archivo en la carpeta fonts y define otros parámetros:Para las clases, toman cada icono 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 icono, como mostramos más arriba:Antes de seguir:¿Qué es un pseudo elemento?Es un elemento creado propio mediante un atributo, el cual se guarda en el archivo de estilos. Por ejemplo data-icon:Siguiendo con el ejercicio, utilizaremos la carpeta fonts y el archivo styles.css y lo llevamos a la carpeta de nuestra aplicación.Para convertir el .css a .styl: Lo que hacemos es que mediante el comando stylus -C style.css lo convertimos (Si el watch está activado lo detenemos con ctrl+c):Nos arroja un buen resultado, a excepción de @font.face que hay que corregirlo manualmente porque aparece undefinedCorregimos agregando toa la orden de pre-render @font-face:Ahora compilamos style.styl y quedaría así:Renombraremos el archivo style.styl por iconos.stylCompilamos todo en un solo archivo: en es,ñm-mtilos.styl usamos el comando @import:Ahora ejecutamos el comando para que compile y vea:Ahora estilos.css nos queda así:Solo agregamos entonces la clase de cada icono y podemos agregarle las propiedades que deseemos. Hay que recordar que debe ser manipulado como fuente.