Cómo usar iconos basado en fuentes tipográficas?

Es claro que existe una nueva tendencia en internet, y la podemos ver por el uso de vectores en todos lados, uno de esos vectores son los iconos minimalistas. Esta vez veremos como hacer uso de iconos basados en fuentes tipográficas (sí, fuentes tipográficas).

Si bien, cuando se trata de vectores a uno se le viene a la mente el uso de svg. Sin embargo, existe otra forma de usar vectores cuando se trata de iconos y son los iconos basados en fuentes tipográficas. Veamos.

Iconos basados en fuentes tipográficas

Una fuente tipográfica por defecto es un vector, con la ventaja de que son mucho mas eficientes que los svg. Ahora, cuando uno hace uso de fuentes personalizadas necesita tener esos archivos que contengan la fuente tipográfica, pasa lo mismo con los iconos. Existen paginas que nos proporciona fuentes tipográficas (como fontsquirrel) y también existen paginas que nos proporcionan iconos basados en fuentes tipográficas. Veremos el ejemplo de icomoon.

Icomoon es uno de los mas famosos en proporcionar estas cosas. Vamos pues, a icomoon.io/app/

Para crear una fuente personalizada basta con seleccionar los iconos que queramos añadir a nuestra fuente personalizada.

Cuando terminemos de seleccionar los iconos nos vamos a "Generar Fuente"

Notemos que cada icono que seleccionamos tiene un código en la parte de abajo. Este es el código que vamos a necesitar para saber de que icono estamos hablando.

Obviamente los códigos varían dependiendo de que iconos hallas seleccionado, En mi caso para el pencil2 es el e900; para camara es el e901; y para micrófono es el e902. Teniendo en cuenta esto, podemos pasar a descargarlo.

Al descargarlo y descomprimirlo, lo abrimos. Notemos que existen varios archivos y carpetas, pero solo los que interesan son la carpeta de fuentes (fonts) y los estilos (style.css). Así que copiaremos la carpeta fonts a nuestro proyecto, los estilos no los copiamos, solo lo abrimos en un editor de código. Solo necesitamos todo el código css que encapsule la propiedad css3 @font-face.

@font-face {
    font-family: 'icomoon';
    src:    url('fonts/icomoon.eot?wkjifi');
    src:    url('fonts/icomoon.eot?wkjifi#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?wkjifi') format('truetype'),
        url('fonts/icomoon.woff?wkjifi') format('woff'),
        url('fonts/icomoon.svg?wkjifi#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

Todo esto lo copiamos un en nuestros estilos css, y si queremos podemos cambiar el nombre de la fuente (el font-family). Una cosa que hay que mirar es que las rutas expresadas en el código de arriba deberán de ser las que corresponden en nuestro proyecto. o mirar el demo que nos proporcionan.

Ahora escribamos un poco de html para expresar esos iconos

<div id="ico1"></div>
<div id="ico2"></div>
<div id="ico3"></div>

Solo son 3 divs con las id: ico1, ico2, ico3.

Para añadir un icono con css necesitamos escribirlo con la propiedad css content, que si recordamos solo se puede usar con los selectores ::before o ::after. Entonces necesitamos escribir mínimo dos cosas, la familia de fuentes (font-family, que en este caso por defecto es icomoon, pero si lo cambiaste coloca el nuevo nombre), y el código del icono que queremos añadir (recordemos: para el pencil2 es el e900; para camara es el e901; y para microfono es el e902).

#ico1:before{
    font-family: "icomoon";
    content: "e900";
}
#ico2:before{
    font-family: "icomoon";
    content: "e901";
}
#ico3:before{
    font-family: "icomoon";
    content: "e902";
}

La diagonal invertida en la propiedad content para el caso de icomoon significa que lo siguiente es un código y no un texto.

Mínimo con estas propiedades tendremos visible el icono correspondiente.

La ventaja de usar iconos basados en fuentes tipográficas, es que son tratadas como tal, o sea, se le puede poner un color, un subrayado, un tamaño, en fin todo lo que se le puede poner con css a un texto.

Explorando en icomoon/app/ te darás cuenta de que existen mas opción para insertar los iconos que escojas. Pero personalmente esta es una de las mejores formas.

Como había dicho antes, existen varias paginas que nos permiten generar nuestros propios iconos basados en fuentes tipográficas. Por ejemplo, también tenemos a: