Crear pack de iconos personalizados mediante IcoMoon

En este post veremos cómo crear nuestro propio pack de iconos mediante la herramienta IcoMoon. Esta herramienta es totalmente gratuita y se hace directamente desde la web.

Lo primero se que vamos a necesitar son las imágenes que quieres introducir en tu pack de iconos. Estas deben de ser imágenes vectoriales (.svg). Se pueden buscar por internet o hacerlas tú mismo con programas de diseño.

Subir y gestionar imágenes

Una vez se tienen las imágenes que se desean en el pack vamos a la herramienta IcoMoon y las subimos con el botón “import icons”. Nos aparecerá ahora una nueva sección de iconos con los que hemos subido. Puedes seguir subiendo imágenes y moviéndolas entre los diferentes grupos de iconos mediante las opciones que aparecen a la derecha de cada grupo de elementos. Como muestro en el siguiente ejemplo:

Descargar pack de iconos

Una vez que tenemos ya subidos todos los iconos tenemos que dejar seleccionados los elementos que queremos que se descarguen en nuestro pack y nos vamos abajo a la derecha a “generate Font”.

Nos aparecerán todos los iconos que estarán en el pack que vamos a descargar. Ahora justo donde esta la opción de “generate Font” está la opción de descargar el pack de iconos. Le damos con los ajustes predeterminados y descomprimimos el archivo.

Integrar pack y usar iconos

Dentro de la carpeta que se ha descargado veremos varias cosas como puede ser una demo de los elementos, archivos css y js. Lo primero que hay que hacer es copiar el contenido y ponerlo en tu carpeta de fuentes que debe de estar en justo a la carpeta de css de tu web.

Hacemos lo mismo con el archivo style.css y lo ponemos en nuestra carpeta css. Como la ruta de donde están las fuentes habrá cambiado es necesario entrar a editar el css y escribirle la nueva ruta relativa de donde están con respecto a este archivo css.

Ahora para poder usar los iconos simplemente tienes que escribir <span class="nombre-icono"></span >. Si no sabes que nombre le has puesto puedes revisarlo desde la página de descarga de IcoMoon, pones el ratón encima de uno de los iconos y te aparece la opción de “get code”, le clicas y copias lo que pone en el campo HTML.