40deFiebre

Cómo convertir tus iconos en una fuente

4 min de lectura · Ir al TL;DR

Una fuente de iconos asigna un dibujo a cada carácter. Una vez cargada en tu web, puedes cambiar su tamaño y color con CSS, igual que harías con una letra.

Vamos a crear una con un icono de una casa. Tienes el ejemplo funcionando y un ZIP con el SVG, la fuente y el código. La descarga permite probar el resultado aunque prefieras dejar la generación de la fuente para después.

Prepara el icono en SVG

Dibuja el icono en un editor vectorial y expórtalo como SVG. Para esta prueba usaremos una silueta de un solo color, sin máscaras ni efectos. Guarda lo siguiente en casa.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <path d="M100 450L500 100L900 450L800 450L800 900L600 900L600 600L400 600L400 900L200 900L200 450Z"/>
</svg>

El viewBox define el espacio del dibujo. El trazado dibuja el tejado, las paredes y el hueco de la puerta. Puedes importarlo tal cual en Fontello.

Si partes de tu propio diseño, revisa las indicaciones de Fontello para importar SVG. Convierte los trazos en contornos cuando lo necesite el importador y comprueba que la silueta no cambie. Una fuente monocroma no conservará los colores de una ilustración.

Genera la fuente con Fontello

  1. Abre Fontello y arrastra casa.svg a la zona Custom Icons.
  2. Selecciona el icono. En Customize Names, ponle el nombre casa.
  3. En Customize Codes, asigna el código hexadecimal e800. Es el que utiliza el CSS de este ejemplo.
  4. Escribe 40df-iconos como nombre de la fuente y pulsa Download webfont.
  5. Descomprime la descarga. Conserva config.json para poder recuperar la selección y los códigos cuando añadas más iconos.

El paquete contiene una carpeta font, hojas de estilo y una página de demostración. Para este ejemplo usaremos el archivo 40df-iconos.woff2. Si has elegido otro nombre, tendrás que cambiarlo también en el CSS.

IcoMoon es otra opción para importar SVG y generar fuentes. Sus controles y archivos exportados son distintos, así que usa los nombres y códigos que produzca esa herramienta si eliges trabajar con ella.

Carga la fuente en tu página

Crea una carpeta con esta estructura:

iconos/
  index.html
  iconos.css
  font/
    40df-iconos.woff2

En iconos.css, añade:

@font-face {
  font-family: '40df-iconos';
  src: url('./font/40df-iconos.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.icon::before {
  font-family: '40df-iconos';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
  width: 1em;
  text-align: center;
}
.icon-casa::before { content: '\e800'; }
.icon { color: #315d80; font-size: 1.4em; }

La ruta de src se resuelve desde el archivo CSS. Aquí ambos están dentro de iconos, y la fuente está en su subcarpeta font. @font-face registra la familia; la regla ::before la aplica al carácter e800.

El ejemplo utiliza WOFF2. Puedes consultar cómo se declara una fuente web en la documentación de @font-face. No necesitas copiar los formatos y parches para Internet Explorer que todavía puedan venir en una descarga.

En index.html, utiliza este código:

<!doctype html>
<html lang="es">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi fuente de iconos</title>
<link rel="stylesheet" href="./iconos.css">
<a href="#inicio"><span class="icon icon-casa" aria-hidden="true"></span> Inicio</a>
<h1 id="inicio">Inicio</h1>
</html>

Abre la página en el navegador. Deberías ver la casa junto a “Inicio”. Para cambiar su color o tamaño, modifica color y font-size en .icon. Si añades otro dibujo, tendrá su propio código y necesitará otra regla content.

Comprueba el resultado

Si ves un cuadrado vacío, revisa el nombre de la familia, la ruta del archivo y el código del icono. En las herramientas de desarrollo, la pestaña de red te dirá si el navegador ha podido descargar la fuente. El CSS del generador sirve para comprobar qué carácter corresponde a cada dibujo.

Pulsa Tab y entra en el enlace con el teclado. El texto “Inicio” debe seguir identificando su destino. El icono lleva aria-hidden="true" porque repite esa información; puedes consultar el uso de este atributo en la documentación de accesibilidad de MDN.

Prueba también a bloquear la descarga de la fuente. Puede desaparecer la casa o aparecer un carácter de sustitución, pero el enlace debe seguir entendiéndose. Por eso conviene conservar una etiqueta visible en las acciones de navegación.

Cuándo usar SVG directamente

Para unos pocos iconos, utilizar el SVG en el HTML puede resultar más sencillo. También permite controlar sus partes y colores sin asignar caracteres ni regenerar una fuente. Una fuente puede encajar si tu proyecto ya trabaja con un conjunto de iconos monocromos y quieres mantener ese sistema.

Compara el peso y las peticiones de tus archivos reales antes de elegir. No hay un porcentaje fijo de mejora de carga por convertir los iconos en una fuente.

Diseño Web

Sigue leyendo

Ver todos los artículos