Portada icon fonts
comments 5

Cómo crear tus icon fonts

Si estás utilizando imágenes para crear iconos en tu web en lugar de icon fonts, lo estás haciendo MAL.

¿Porqué?:

  • El tamaño de las imágenes importa. Da igual que sea JPEG o PNG. Los elementos que más pesan de una web son siempre las imágenes.
  • Si utilizas una imagen para un icono necesitarás una imagen para cada estado del icono, como por ejemplo, cuando es pulsado, cuando está inactivo, cuando está highlighted, etc. Es decir, multiplica el número de imágenes que estás usando, por el número de estados y calcula todas las imágenes que necesitas crear, subir a tu servidor y cargar.
  • Cuanto mayor número de imágenes tenga que cargar el servidor, más tiempo tiene que esperar el usuario.
  • El mundo cada vez es más móvil. Tus usuarios visitan tu web desde cualquier parte del mundo, desde cualquier lugar, y puede que la conexión no sea la mejor.
  • Y por si fuera poco, si tu página tarda demasiado en cargar te arriesgas a una penalización SEO por parte de Google.

Pero no te preocupes, que vamos a ponerle remedio en este artículo. En esta clase (la número 9 ya de nuestro Curso de Desarrollo web desde cero) vamos a ver:

  • qué son los icon fonts.
  • porqué debemos usarlos en nuestros proyectos.
  • cómo usarlos.
  • y lo que es mucho mejor: vas a aprender a crear tus propias colecciones de iconos, diseñados por ti.

Ya no tendrás excusa para seguir usando imágenes para crear los iconos de tus proyectos web.

Qué son los icon fonts

Los icon fonts son fuentes. Texto. La única diferencia es que en lugar de tener letras, tienen iconos, formas, pero no hay ninguna diferencia a la hora de tratarlos. Ambos tienen lo que se denominan glifos.

Cuando usamos icon fonts, como no tenemos que usar imágenes para los iconos, logramos optimizar los tiempos de carga en nuestra web.

Pero mucho más importante, mientras que las imágenes se pixelan cuando se aumentan o en pantallas que son retina, las fuentes son vectoriales y siempre se verán correctamente, por mucho que ampliemos la pantalla o por mucha resolución que tenga, tal y como vemos en estos ejemplos.

iconos que son imágenes y se pixelan

Como puedes ver al ampliar las imágenes de los iconos de las banderas, se pixelan.

icon font ampliado, totalmente vectorial no se pixela

Como puedes ver, los icon fonts, al igual que el texto, se ven correctamente por mucho que ampliemos.

Pero además, como podemos tratarlo como una fuente, mediante reglas css podremos darle color o cambiar su tamaño o darles sombras, animarlos, transformarlos, etc.

Cómo enlazar icon fonts en tu proyecto

Ya hemos visto la importancia de usar icon fonts en lugar de imágenes, pero ¿cómo se usan?

Lo primero que tenemos que hacer es descargar algún pack de icon fonts para poder usarlos y empezar a trabajar con ellos.
No te preocupes, más tarde veremos que podemos crear nuestros propios icon fonts.

En este caso podemos usar Font Awesome. Es uno de los packs más famosos y usados.
Haz click en “download” y descarga el pack.

Font Awesome home

Font Awesome home. Haz click en Descargar.

iconos de Font Awesome

Estos son alguno de los font icons de Font Awesome.

La descarga contiene un css, la versión less y sass del css por si estáis usando pre-procesadores en tu proyecto y los archivos de fuente eot, ttf, woff, otf, svg que ya vimos en la clase anterior sobre fuentes seguras. Ya sabes que las True Type puedes instalarlas en tu ordenador y usarlas en tus wireframes y mockups.

¿Quieres convertir las visitas de tu web en clientes de forma automática?
En mi curso “8 claves para crear tu estrategia online” te cuento como hacerlo

COMENZAR CURSO GRATUITO

Instalando las Icon fonts para usarlas en nuestro servidor

Para usarlo en nuestro proyecto añadimos los archivos descargados a la carpeta de nuestro proyecto, y enlazamos el css que hemos descargado con una etiqueta link:

<link rel="stylesheet" href="css/font-awesome.min.css">

El archivo min es igual que el otro, pero comprimido, es decir, con todas las reglas css en una misma línea. Ocupa menos espacio pero es menos legible, pero como no vamos a tocar nada nos vale así.

Yo tengo por costumbre comprobar que el archivo está correctamente enlazado en nuestro index, ya que es vital que ninguna ruta sea errónea o tendremos errores.

Para comprobarlo, abre tu html en tu navegador, conecta el inspector (cmd + alt + I en mac) y pulsa la pestaña de consola. Si el archivo está mal enlazado por poner una ruta errónea te saldrá un mensaje de error en rojo como este indicando que no encuentra el archivo al que haces referencia en tu html:

la consola del inspector nos muestra un error

La consola del inspector nos muestra un error porque no encuentra el archivo.

Instalando las Icon fonts para usarlas desde un servidor externo

Puede que prefieras cargar la fuente desde un servidor externo, tal y como hacíamos al instalar nuestra fuente con google web fonts en la clase 7.

En este caso, Font Awesome lo permite.
Para ello vamos a “get started” y sólo tenemos que copiar y pegar la etiqueta link que nos proporciona y colocarlo en el head de nuestro index.

codigo para enlazar desde servidor externo

Copia este codigo para enlazar desde servidor externo.

Utilizar este sistema tiene como ventaja y como desventaja que los diseños de los iconos se actualizarán automáticamente cuando exista una nueva versión, lo cual será bueno si nos interesa, y muy malo si lo que queremos es mantener el diseño con el cual el proyecto fue concebido. Es una decisión que tienes que tomar tu.

Cómo usar los icon fonts

Una vez enlazados los icon fonts a nuestro proyecto, ya podemos usarlos.
Si vemos la lista de iconos de Font Awesome, podemos ver que cada icono tiene a su derecha un nombre y un código extraño.

clase css del icon font y su unicode

Clase css del icon font y su unicode

Bien, el nombre es su clase en css y el código extraño es su unicode.

Para nuestra prueba vamos a elegir el ya clásico icono de menu de hamburguesa, que tiene de clase css, tal y como indica la cheatsheat que tiene disponible la web de font awesome: “fa-align-justify”.
Así, basta con que en nuestro html pongamos:

<div class="fa fa-align-justify"></div>

Es decir, creamos una etiqueta de html, en este caso div, y utilizamos primero la clase padre “fa” de font awesome y luego la clase del icono en concreto, “fa-align-justify”. Si no lo haces así no cargará el icono.

icon font de hamburguesa cargado

icon font de hamburguesa cargado

Ahora que ya tenemos nuestro icono podemos aplicarle la regla css que queramos y así poder aumentarle el tamaño con “font-size”, o cambiarle el color con “color”, etc.

font icon de hamburguesa más grande y de color azul con CSS

Font icon de hamburguesa más grande y de color azul con CSS

Usando el unicode

Si por el contrario no deseas complicar tu html con más clases y etiquetas, siempre puedes usar el unicode de cualquier icon font para visualizarlo.

El unicode es el código que viene a la derecha de cada icono en el cheatsheet. En el caso de nuestro icono de hamburguesa es xf039

Un código unicode se escapa un poco del objetivo de la clase. Simplemente diremos que es una entidad de html que poseen los elementos de texto (los glifos) para poder ser representados y mapeados, y que por tanto podemos usar para representar un icon font.

Si quieres más información sobre códigos unicode puedes visitar: unicode-table.com

unicode table home

Unicode table home

Para usar el unicode en lugar de la regla css basta con copiar y pegar el código y usarlo en el html como si fuera texto. Eso sí, siempre acompañado de la clase padre “fa” en el caso de los iconos de Font Awesome.

<p class="fa">codigo unicode</p>

Plataformas para descargar icon fonts

No solo existe Font Awesome, hay muchos más lugares donde obtener estos iconos, como por ejemplo:

icomoon home

icomoon home

Useiconic home

Useiconic home

Glyphicons home

Glyphicons home

Font icons home

Font icons home

Fontastic home

Fontastic home

Fontello home

Fontello home

Y cada uno de los ejemplos vistos tiene sus particularidades, algunos son totalmente gratis, mientras que otros tienen poderosas versiones de pago.

Cada una de estas plataformas tiene unas características que las hacen única. Te recomiendo que les des un vistazo, así podrás usarlas en función de cómo sea tu proyecto.

Por último, además de todas estas plataformas, muchos frameworks incluyen sus propias icon fonts, como por ejemplo Bootstrap.

Para usarlos solo tienes que utilizar las clases CSS que vienen en la documentación del propio Framework.

Font icons incluídos en Bootstrap

Font icons incluídos en Bootstrap

Cómo crear tus propios iconfonts

Ahora viene lo interesante y potente: como crear tus propios iconos.

Lo primero que necesitamos es nuestro icono en formato svg (scalable vector graphics).

Un svg es una imagen en formato vectorial, por tanto es lo que necesitamos para poder convertir nuestros iconos en vectores para poder crear fuentes a partir de ellos.

Adobe Illustrator y Sketch entre otros, nos permiten crear archivos de imagen vectorial svg. De hecho, casi cualquier software de tipo vectorial te permitirá generar imágenes en este formato.

Para este ejemplo en concreto, vamos a crear un icono de Incoming Startup, el logo IS sobre fondo redondo.

Vamos a diseñarlo en el rey de los software vectoriales, Illustrator y, como no, en el software de moda para los diseñadores maqueros: Sketch.

Diseñando el icono en Adobe Illustrator

Vamos a crear un documento de 64px cuadrado, activamos la cuadrícula, malla, grid, o como quieras llamarle y la ajustamos a 16px con 2 subdivisiones.

Creando documento de Illustrator

Creando documento de Illustrator

Mostrando la cuadrícula

Mostrando la cuadrícula

El motivo de hacerlo con múltiplos de 16px es porque es el tamaño estándar de las fuentes en los navegadores, y por tanto es una forma efectiva de controlar los espacios de nuestro futuro icono con respecto a textos inline. Considéralo una forma de tener sorpresas desagradables al maquetar la web.

    • Hacemos un circulo de 64 px centrado de color de relleno #4A4A4A (el color realmente es lo de menos, se creará en negro, pero bueno, por aquello de usar los colores corporativos) y sin borde.
Circulo base centrado

Circulo base centrado

    • El círculo hay que expandirlo en Objeto > Expandir, ya que los trazos no quedan demasiado bien cuando los convertimos a svg.
    • Ahora para las letras IS interiores, usamos fuente helvetica neue bold de color #FCFCFC y de 48 pt de tamaño. El color es lo de menos, lo vamos a usar para recortar el círculo con el texto.
Creando las fuentes para el recorte

Creando las fuentes para el recorte

    • Para recortar el fondo con las letras vamos a usar la herramienta Buscatrazos. Lo podemos encontrar en Efecto > Buscatrazos, o puedes darle a Ventana > Buscatrazos y tenerla siempre visible.
    • Ahora seleccionamos el círculo y el texto, y pulsando la tecla “alt” en mac, le damos a Cortar en las opciones de modos de forma, el segundo icono empezando por la izquierda.
Perforando el círculo con el texto en Illustrator

Perforando el círculo con el texto en Illustrator

    • Una vez perforado el circulo con nuestro texto tenemos que unirlo y darle a “Expandir”. Podemos hacerlo desde el propio panel de Buscatrazos.
Forma final expandida

Forma final expandida

    • Una vez creado y preparado nuestro icono, lo exportamos como svg. Para ello vamos a Archivo > Guardar como… y en formato elegimos svg, tal y como indica la imagen.
Exportando el icono a svg en Illustrator

Exportando el icono a svg en Illustrator

Diseñando el icono en Sketch

En Sketch básicamente hacemos lo mismo pero con alguna sutil diferencia que veremos:

    • hacemos un circulo (atajo de teclado O) de 64 x 64 de color #4A4A4A
Creando la base del icon en Sketch

Creando la base del icon en Sketch

    • hacemos el texto y centramos ambos elementos.
Creando el texto de Incoming Startup en Sketch

Creando el texto de Incoming Startup en Sketch

    • Tenemos que convertir el texto a Outlines para poder recortar el fondo, con botón derecho del ratón elegimos la opción.
Convirtiendo el texto en Outlines en Sketch

Convirtiendo el texto en Outlines en Sketch

    • Seleccionamos ambos objetos y le damos a la opción de substrac.
Recortando ambos objetos

Recortando ambos objetos

    • Seleccionamos la forma resultante, le damos al botón de “Make Exportable”, y elegimos el formato svg
Exportando a svg en Sketch

Exportando a svg en Sketch

Generando icon font con IcoMoon

Ahora que ya tenemos nuestro svg ya podemos crear nuestro icon font. Para ello vamos a usar la plataforma IcoMoon:

Una vez en la home de IcoMoon le damos al botón de “IconMoon App“.

Al arrancar la aplicación aparecen los iconos por defecto de los que dispone la plataforma, y que puedes usar en tus proyectos.
Para crear nuestro icono pulsamos el botón de “Import Icons”, y seleccionamos nuestro svg.

Icon fonts disponibles en Icomoon

Icon fonts disponibles en Icomoon

Nos aparecerá el icono que acabamos de importar. Ahora solo tenemos que seleccionarlo y darle al botón de abajo de “Generate Font”.

Generando icon font en Icomoon

Generando icon font en Icomoon

Inmediatamente podemos darle el nombre que utilizará la clase de CSS y que tendremos que poner para usar en nuestro proyecto. En mi caso “is-iconfont” y le damos a “Download”.

Descargando el icon font creado

Descargando el icon font creado

Descargaremos una carpeta comprimida con todos los archivos que necesitamos, donde están las fuentes en todos los formatos necesarios, una demo para ver como se usan y el style.css que necesitamos incluir en nuestro index.html.

Ahora que tenemos todos los archivos que necesitamos lo enlazamos en nuestro html. Para ello le damos al icono de “get code” y nos sale una ventana modal donde podemos elegir el método que preferimos para usar la fuente.

Snippet de código para usar la fuente en el html

Snippet de código para usar la fuente en el html

Seleccionamos el código html y lo pegamos en nuestro index, y voilá, ya tenemos nuestro icono. Podemos observar que también nos ha generado nuestro código unicode o si queremos utilizarlo como atributo css.

Nuestro icono ampliado al 500% en el navegador

Nuestro icono ampliado al 500% en el navegador

Conclusión

Ya has visto lo fácil que es crear un icon font, y lo necesario que es utilizarlo en nuestros proyectos, así que ya no hay excusa para seguir usando png.

¿Y tú, has creado tu pack de icon fonts personalizado? ¿Qué plataformas utilizas?

Post Relacionados:

Clase 0, Introducción al curso.
Clase 1, Tu primera web app.
Clase 2, HTML 5.
Clase 3, Maquetación web básica.
Clase 4, Id, clases y normalize.
Clase 5, Display block, inline e inline-block.
Clase 6, Position.
Clase 7, Instalando fuentes desde Google Web Fonts.
Clase 8, instalando Fuentes Seguras.

Clasificado como: Código

Sobre el autor

Escrito por

Me llamo Francisco Gallardo , y soy diseñador de productos de software, mobile y web. Soy diseñador de UX, de interfaces y desarrollador web y iOS.

5 Comentarios

  1. luis_aledo

    Buenas Fran, felicidades por tu blog… que desde que coincidimos, sigo leyendo… puntuar dos cosillas que no estoy del todo de acuerdo.

    Por un lado comentas el problema de generar una imagen para cada icono y para cada estado… ahí creo que sería bueno comentar la solución de sprite .. algo que sigue utilizando google en formato svg, y si lo hace es por algún motivo.
    http://www.google.es/chromebook/about/
    http://www.google.es/chromebook/static/images/icons-sprite.svg

    Por otro lado también me gustaría comentar la opción de generar iconos mediante svg, si seguirmos a google vemos en su documentación que aconseja utilizar las fuentes para generar los iconos con precaución… entre otras cosas no es muy semántico.
    https://developers.google.com/web/fundamentals/media/images/use-icons?hl=es#usar-fuentes-de-iconos-con-precaucin

    Simplemente es un punto de vista de un usuario que debe de escuchar lo que dice google si o si, sobre todo por su trabajo.

    Saludos
    Luis

  2. FranciscoJGallardo

    Hola Luis!
    Muchas gracias por tu comentario.
    Si. Es evidente que hay más formas de representar gráficamente un icono en nuestros proyectos web.
    Y sin duda mi favorita para representar iconos, son los icon fonts por lo versátiles que son.
    Yo el uso de svg lo veo más para logos, esquemas gráficos etc no tanto para iconos.
    Muchísimas gracias por el aporte Luis, un fuerte abrazo.

  3. Emiliano

    Gracias, Fran, me estaba volviendo loco con un template, ya que no conseguía saber de donde se cargaban las imágenes de los iconos. Me has dado luz! a la oscuridad de días!!. Muchas gracias por compartir tu conocimientos!!
    Un abrazo ;-)

  4. Hola Fran, me parece un manual muy bueno y desde que he empezado a utilizar fa-icon no le veo el fin de utilidades que antes tenia que pelear con mi diseñador grafico. ;P

    Ahora me veo las manos mas libres para modificar todo y que el pesado de mi deseñador no me este metiendo imagenes en los huecos mas reconditos con textos y demás chorraditas.

    un saludo.

  5. Julio Franco

    Gracias por este valioso aporte…ya lo estoy usando en mi web…Saludos desde Paraguay…

Leave a Reply