Como crear iconos Webfont con icoMoon

Como crear iconos webfonts

Las Fuentes Web más conocidas en inglés como Web Fonts son una excelente alternativa a las imágenes cuando tienes que añadir una decena de iconos en tu página web.

Una de las ventajas de utilizar iconos webfont es que funcionan en todos los navegadores (incluyendo IE6), puedes escalar los iconos a cualquier tamaño, cambiarlos de color facilmente y sin olvidarnos que puedes empaquetarlos en un único archivo de fuente.

Desafortunadamente, rara vez necesitarás cientos de iconos. Es un derroche utilizar un archivo de fuentes que contenga cientos de iconos y que sólo utilices un par de ellos, la situación se agrava en el caso de que necesites utilizar unos cuantos iconos de dos o tres fuentes diferentes.

IcoMoon ¡es la solución!

IcoMoon es una aplicación en HTML5 que resuelve todos estas problemas, ya que te permite:

  • Navegar y buscar en más de 600 iconos
  • Subir IVS individuales o tus propios paquetes de fuentes (las fuentes SVG son compatibles)
  • Editar iconos directamente en tu navegador
  • Agregar cualquier número de iconos para una colección de fuentes
  • Asignar un determinado caracter a una fuente, por ejemplo, en lugar de utilizar "r" se puede utilizar un carácter de espacio para asegurar que los lectores de pantalla lean en voz alta el caracter, evitando así los problemas de accesibilidad
  • Descargar el código de ejemplo y el paquete de fuentes que contienen los iconos seleccionados

Paso 1: IcoMoon selección de iconos

Para comenzar, accede la aplicación online en IcoMoon, puedes subir, mirar y buscar colecciones de iconos. También podrás seleccionar o deseleccionar cualquier número de iconos, haciendo clic en el propio icono:

Selección de iconos en Icomoon

Paso 2: IcoMoon edita tus iconos

Pasa el ratón sobre cualquier icono y haz clic en Editar para realizar una edición básica como rotar, reflejar y cambiar. También puedes descargar un icono como SVG, editarlo en Illustrator, Inkscape o SVG y cargar la versión modificada:

Edita los iconos en IcoMoon Modificar icono en icoMoon

Paso 3: IcoMoon generar fuente

Una vez que estés satisfecho con los cambios realizados en tus iconos, haz clic en el botón Font situado en la parte inferior de la pantalla, para ver y ordenar los iconos que haz seleccionado.

Generar fuente en icoMoon

Puedes asignar un caracter determinado a cada icono, haciendo clic en la barra superior y pulsando la tecla correspondiente o haciendo clic en la barra inferior e introduciendo en el número Unicode:

Asignar caracter al icono

Paso 4: IcoMoon descargar paquete de Fuente

Por último, haz clic en el botón Save situado en la parte inferior de la pantalla para descargar el archivo ZIP personalizado con tus fuentes.

Descargar paquete de fuentes de icoMoon

IcoMoon es una de las aplicaciones de desarrollo web en HTML5 más útiles que he visto y elimina varios problemas asociados con WebFonts.