Cómo crear una Icon Font

Las Icon Fonts son tipografías que en lugar de tener letras tienen iconos. Al ser una fuente es lo primero que se carga en una página y, por lo tanto, su peso disminuye.

Ventajas

• Los iconos tienen una alta resolución y son escalables a cualquier tamaño sin perder calidad. Son ideales para responsive design, es decir, se ven muy bien en pantallas de cualquier resolución.
• Por medio de CSS puedes cambiar su color o tamaño fácilmente así como usar degradados o sombras.
• Son accesibles, ya que al nombrarlos con términos comunes facilitas la comprensión de su significado a los lectores de pantalla para discapacitados.

Proceso

Ahora veamos el proceso desde la creación del icono a su exportación a Scalable Vector Graphics (SVG):

• Trabajando con Illustrator creas un nuevo archivo. Lo primero es tener claro cuántos iconos necesitas y cuáles son.
• El diseño de los iconos debe estar adaptado al tamaño en que se van a mostrar en tu página web, es decir, a mayor tamaño, mayor nivel de detalle pueden tener y viceversa.
• Necesitarás una mesa de trabajo por icono y ésta debe ser cuadrada.

• Nombra cada mesa de trabajo con términos comunes. Importante: no uses acentos, interrogaciones o la letra ñ.

• El tamaño de las mesas de trabajo dependerá del diseño de los iconos y del tamaño en que se mostrarán en la web, es decir, si los iconos solo se van a usar a 16px el diseño se simplificará muchísimo. Lo ideal es que uses el tamaño más grande con que podrían utilizarse en la página web.

Una vez creados y organizados los iconos estamos listos para exportar:

- Desde la pestaña Archivo -> Guardar como -> SVG
- Selecciona el checkbox Usar mesas de trabajo -> Guardar y ¡listo!

IcoMoon

Ahora toca el turno de una herramienta web que a mí personalmente me encanta por su facilidad de uso: IcoMoon App. Esta herramienta nos va a ayudar a pasar de iconos vectoriales a webfont editable mediante CSS.

Con IconMoon podemos importar nuestros iconos o utilizar los más de 4.000 iconos gratuitos que ofrece. También es posible acceder a más iconos en la versión premium.

• Primero debemos importar los iconos .svg

• Dentro del proyecto podrás editar, eliminar o cambiar el orden de los iconos

• Una vez que tengas todos los iconos importados y ordenados clica en el botón Generar Fuente

En la siguiente pantalla veremos que IconMoon genera un código unicode por cada icono. Este será el valor a utilizar en la hoja de estilos.

Clica en download y ¡listo! Ya tenemos creada nuestra Icon Font con ayuda de Illustrator y IconMoon.

Así que olvídate de los sprites y comienza a usar Icon Fonts. ;)

Artículo escrito por Ana Contreras