Si estás leyendo esto, es muy probable que ya conozcas Font Awesome, un conjunto de iconos vectoriales para utilizar en tu página web (ya esté realizada con código a medida o con algún CMS como WordPress).

En este artículo no vamos a explicar cómo utilizar los iconos de Font Awesome en tu web: damos por hecho que ya lo sabes o que tu plantilla o plugin ya los utilizan. Vamos a ir un poco más allá y vamos a explicar cómo añadir más iconos personalizados al conjunto de iconos que trae por defecto Font Awesome. Esto puede resultar muy interesante si estamos cansados de ver siempre los mismos iconos en todas las web y queremos una mayor personalización: es mucho mejor convertirlos en una fuente que subirlos como imágenes, ya que pesarán más y ralentizarán más la velocidad de carga de la web.

Al final de artículo os explicamos cómo subir iconos personalizados de IcoMoon a vuestra web de forma manual o con un plugin si utilizáis WordPress.

¿Qué necesitaremos?

1.- Saber dónde se ubican los archivos de font-awesome a los que llama nuestra web, plantilla o plugin.

2.- Tener los iconos que queremos añadir en formato .svg

Paso a paso…

1. Iremos a la aplicación de IcoMoon

2. Haremos clic sobre el botón “Import Icons” de la esquina superior izquierda.

3. Se abrirá una nueva ventana y escogeremos los archivos .svg que ya tenemos generados de font awesome.

4. Aparecerá un pop up y deberemos hacer clic sobre el botón “YES” del mismo.

5. Ahora, repetiremos este proceso pero subiendo los archivos .svg de los nuevos iconos personalizados. Veremos que se han cargado dentro de un conjunto denominado “Untitled Set”. Seleccionaremos todos los nuevos iconos y haremos clic sobre el icono con las tres rayas horizontales que se encuentra en la esquina superior derecha del conjunto de iconos de font-awesome, para seleccionar la opción “Move selection here” y, así, mover los nuevos iconos al conjunto de font-awesome.

6. Haremos clic sobre el botón inferior “Generate font”.

7. En el botón que hay en la parte de arriba “Preferences”, deberemos dar el mismo nombre al conjunto de iconos que tenía el original y el mismo prefijo.

8. Si ponemos el ratón encima de cualquiera de los nuevos iconos, aparecerá una opción para copiar el código asociado a ese icono “Get code”.

9. Veremos que aparece una ventana con el código CSS asociado al icono, que deberemos añadir en el archivo css que tenemos asociado a font-awesome (generalmente un css minificado).

10. Descargaremos la nueva fuente con el conjunto de iconos. Descomprimiremos la carpeta y en la carpeta “fonts” encontraremos los archivos asociados que deberemos sustituir por los iniciales.

¿Qué pasa si mi plantilla o plugin no utiliza font awesome o tengo problemas de incompatibilidad y quiero añadir iconos personalizados?

Podemos hacerlo de forma manual. Seguiremos los pasos anteriores desde el paso 5 y nos descargaremos la carpeta zip. La descomprimiremos y subiremos  la carpeta “fonts” a nuestro servidor. Después, copiaremos el contenido del archivo style.css a la hoja de estilos de nuestra plantilla. Deberemos modificar ese css con la ruta a nuestra carpeta fonts. Estas serían las líneas a modificar:

@font-face {
  font-family: 'scherzoicons';
  src:  url('fonts/scherzoicons.eot?rur75c'); // con la ruta correcta a nuestra carpeta fonts
  src:  url('fonts/scherzoicons.eot?rur75c#iefix') format('embedded-opentype'), // con la ruta correcta a nuestra carpeta fonts
    url('fonts/scherzoicons.ttf?rur75c') format('truetype'), // con la ruta correcta a nuestra carpeta fonts
    url('fonts/scherzoicons.woff?rur75c') format('woff'), // con la ruta correcta a nuestra carpeta fonts
    url('fonts/scherzoicons.svg?rur75c#scherzoicons') format('svg'); // con la ruta correcta a nuestra carpeta fonts
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Por último, podremos utilizar los iconos añadiendo código html:


En la clase pondremos el nombre que le hayamos dado al icono que queremos mostrar. También podremos darle un estilo, poniendo el tamaño de la fuente o el color de la misma.

Como último recurso para utilizar estos iconos personalizados, si utilizáis wordpress, podéis utilizar el plugin WP SVG ICONS, que tiene un importador de iconos de IcoMoon.