Crear pack de iconos personalizados mediante IcoMoon

Fecha de publicación:

Introducción

En este post veremos cómo crear nuestro propio pack de iconos mediante la herramienta IcoMoon. La herramienta es totalmente gratuita y es necesario descargarla para usarla simplemente descargaremos el pack de iconos hecho. Esta herramienta nos puede valer para varias cosas:

  • Usar imágenes vectoriales personalizados en nuestra web
  • Juntar varios packs de iconos
  • Tener un pack de iconos ultra ligero seleccionando solo los iconos que vamos a usar
  • Añadir iconos personalizados a un pack ya existente

Aunque todos se hacen de la misma forma para no liar llevaremos a cabo un ejemplo práctico de la última de las opciones que hemos mostrado previamente "Añadir iconos personalizados a un pack ya existente".

Contenido

No vamos a explicar cómo crear tu propio icono. Los iconos los puedes crear tú mismo con programas como Adobe Illustrator u otros programas de diseño vectorial. También puedes descargar imágenes vectoriales .svg de internet para usarlo en tu pack de iconos.

Subir iconos personalizados a IcoMoon

Témenos que ir a IcoMoon y le damos a IcoMoon App en la parte superior derecha. Nos llevará a la página principal de creación de packs. En la cual veremos algo como esto:

página principal para crear iconos en icoMoon

Le damos a Import Icons y seleccionamos los que queremos añadir al pack de iconos.

Una vez subidos nos aparecerá en un nuevo apartado de la misma página llamado a Untitled Set. Esto es interesante ya que puedes tener diferentes bloques de iconos en el mismo pack. Esto es simplemente por organización por lo que si queremos dejarlos en diferentes agrupaciones no habría problema.

Funcionamiento de IcoMoon

En este apartado iremos viendo las diferentes cosas que puedes hacer para trabajar mejor con tus iconos. En el caso de que simplemente quieras crear el pack de iconos rápido te puedes saltar esta sección.

Barra de herramientas

Vamos ha explicar el funcionamiento de cada herramienta que nos brinda en la parte superior de la página.

barra de herramientas icoMoon
  1. Con Import Icons importamos iconos al proyecto en un nuevo set/bloque como hemos mostrado en el apartado anterior.
  2. En Icon library podemos escoger pack de iconos hechos por otra gente para usarlo en el nuestro personalizado.
  3. Con Select podemos seleccionar y deseccionar iconos para poder hacer diferentes acciones con los iconos seleccionados.
  4. Con Remove eliminaremos los iconos a los que vayamos haciendo clic, cuidado porque no pide confirmación para eliminar. Puedes acceder directamente a esta función con el teclado (Ctrl + Alt).
  5. Con Move podemos ordenar dentro del mismo set/bloque los iconos a nuestro gusto.
  6. Con Edit podemos cambiar los nombres de los iconos. Esto nos sirve cuando vamos a llamar desde html a un icono saber como llamarlo, en el caso de que no se le haya puesto ninguno se queda con el nombre del archivo que subiste.
  7. Con la Barra de busqueda podemos buscar iconos por nombre dentro de nuestro pack.
  8. Con Undo deshacemos los cambios que podamos hacer hecho. Puedes hacerlo con Ctrl + z.
  9. Con Redo podemos rehacer lo que hayamos deshecho sin querer. Se puede utilizar el comando Ctrl + Shift + z para hacerlo.

Agrupar iconos

Podemos mover los iconos entre los diferentes grupos de iconos que tengamos en el proyecto que estamos haciendo. En el caso de querer agrupar iconos tenemos que tener seleccionados únicamente los iconos que queremos mover e ir a las opciones del grupo en el que los queremos poner y darle a Move selection here como muestra el siguiente GIF.

gif que muestra como mover iconos

Importar a un set existente

En el caso de que quieras añadir nuevos iconos a un set ya existente simplemente tienes que ir a las opciones del set en el que lo quieres añadir y le das a importar. Escoges los archivos del ordenado que se añadirán a ese set de iconos.

Descargar packs de iconos

Para descargar el pack de iconos personalizado tenemos que tener seleccionado los iconos que queremos tener en el pack e ir abajo a la derecha a generar fuente. En este apartado si vemos la pestaña a la que le acabamos de dar nos aparece el botón de descargar. Antes de descargar le daremos a los ajustes que aparecen justo al lado. Yo le he puesto como nombre del pack custom y como prefijo de clase my-. Con estos simples ajustes podemos descargar la fuente.

descarga del pack de iconos personalizado

Ahora que ta tenemos los iconos personalizado nos toca integrarlo en el pack que queramos usar, en mi caso FontAwesome por lo que nos vamos a la página oficial de FontAwesome y descargamos la versión que queramos del formato web para tener el CSS.(recomiendo que sea la última versión ya que suele tener más iconos).

Integrar packs de iconos

Lo primero que vamos a hacer es poner el pack de FontAwesome en nuestra web:

  1. Vamos a la carpeta que hemos descargado de FontAwesome y copiamos el archivo all.css que está en la carpeta css y lo pegamos en el interior de la carpeta css de nuestra página web.
  2. Copiamos la carpeta entera de webFonts de FontAwesome y la pegamos en el mismo lugar donde está nuestra carpeta css. No lo pegues en el interior de la carpeta css.

Ahora viene los más dificil, integrar el pack personalizado a FontAwesome.

Vamos a la carpeta que hemos descargado de IcoMoon con nuestros iconos personalizados y copiamos los cuatro archivos que hay en el interior de fonts. Pegamos estros archivos en la carpeta webFonts de nuestra página web quedando esta carpeta de la siguiente forma:

todas las fuentes del pack de iconos

Una vez tenemos esto ya podemos agregar el CSS de nuestro pack personalizado al CSS de FontAwesome que hemos puesto anteriormente en nuestra carpeta css de la página web.

Esto requiere de varios pasos para hacerlo bien. Primero cogeremos todos los iconos con su código Unicode que apuntan a las fuentes que hemos guardado antes en webFonts. Ahora abrimos el archivo all.css que hemos puesto antes en nuestra página web (la hoja de estilos de Font awesome) y pegamos al final de los nombres de iconos de FontAwesome. Quedando de la siguiente forma en el archivo all.css

nombre y valor unicode de los iconos

Nota: En el caso de que añadas más iconos en tu pack de iconos es recomendable que copies y pegues todas las redirecciones a su código unicode de los iconos personalizados como muestra en la captura anterior ya que si no lo haces puedes estar redirigiendo al icono equivocado cuando escribas su nombre.

Por último, nos queda decirle mediante css donde están guardados los iconos. Recordemos que los iconos están guardados en la carpeta webFonts en los cuatro archivos custom que hemos pegado antes. Para eso cogemos las primeras líneas del css custom y lo pegamos al final de all.css modificando la ruta que es ../webfonts/custom.extensión. Como son 4 archivos lo tendrás que hacer en las cuatro rutas.

Ruta a copiar

ruta a copiar del archivo style.css

Ruta pegada en all.css

ruta a pegada en el archivo all.css

Si te fijas cuando he pegado la ruta he puesto debajo my. {...} eso nos sirve para dar un formato predetermiando a los iconos y que se vean igual con todos los navegadores. No es obligatorio usarlo.

Usar los nuevo iconos

Importamos la hoja de estilos exantamente igual que si importas la hoja de estilos de tu página web. Le indicas la ruta y que es una hoja de estilos de la siguiente forma:

    
    <link rel="stylesheet" href="css/all.css">
    

Como ya lo tenemos importado podenos poner cualquier icono custom como puede ser el cual se escribe <i class="my my-dir-este"></i>. Tambien podemos usar cualquier icono de FontAwesome el cual se escribe así <i class="fab fa-github-alt fa-fw"></i>