IcoMoon: Crear fuentes con iconos (propios o gratuitos)

diseno.jpg
Solucionex
29
Sep 13

Cada día es más habitual hacer uso de Icon Fonts para incluir iconos gráficos en nuestras webs. Los Icon Fonts son básicamente tipos de letra como Arial o Times New Roman pero que, en lugar de letras, contienen iconos.

Si tenemos previsto utilizar bastantes iconos en nuestra web, suele compensar hacer uso de una Font Icon puesto que nos aporta entre otras las siguientes ventajas:

  • Al tratarse de fuentes de texto puedes modificar su tamaño, color y demás características mediante CSS como harías con cualquier texto normal.
  • Aumenta la velocidad al reducir el número de peticiones al servidor (una para la fuente en lugar de N para acceder a cada icono individualmente). En este sentido es igual que el uso de sprites.
  • Normalmente una Icon Font pesa bastante menos que si se hubieran generado los iconos como imagen de forma individual.

Hay múltiples fuentes de iconos disponibles para descargar y utilizar en tus webs (cada día más) pero, ¿qué ocurre si quieres hacer una fuente propia con los iconos que tú necesitas? Una posible solución pasa por el uso de herramientas que generan fuentes a partir de los iconos que tú elijas. Una de ellas es IcoMoon que, además de permitir generar una fuente personalizada partiendo de su propia librería de iconos gratuitos, permite que subas tus propios iconos para, a partir de ellos, crear la Icon Font.

IcoMoon ofrece la que llaman IcoMoon App mediante la cual puedes, de forma gratuita, descargar iconos en el tamaño que tú elijas, o generar Icon Fonts con los iconos que hayas seleccionado (ya sean de su librería, o subidos por tí).

A día de hoy disponen de más de 3.800 iconos gratis y disponen también de una opción para acceder a librerías de iconos premium (en este caso de pago).

Además IcoMoon permite otras posiblidades como hacer uso de sus Icon Fonts alojadas en su CDN de manera que podrías utilizarlas acelerando el tiempo de carga de tu web y reduciendo el consumo de datos de tu servidor.