Usando Fonts como Iconos con IcoMoon

Es una muy buena idea usar Fonts para tus Iconos en la web, es ves de estar usando imágenes pesadas, sprites complicados que lo único que hacen es aumentar las peticiones HTTP y aumentar la carga al servidor. Sin embargo utilizar Fuentes (Fonts) se está convirtiendo en un método popular en la web, ya que estas No aumentan la carga al servidor y se reducen enormemente las peticiones HTTP. Es una excelente herramienta para crear interfaces tanto para front-end como para el back-end.

De las mejores opciones gratis que se pueden implementar está IcoMoon.io. Esta web ofrece una aplicación en HTML5 que nos permite elegir que iconos se quieren usar y luego generar un archivo el cual contiene:

  • /fonts/icomoon.eot
  • /fonts/icomoon.svg
  • /fonts/icomoon.ttf
  • /fonts/icomoon.woff
  • index.html
  • license.txt
  • lte-ie7.js
  • style.css

Los primero 4 son los fonts generado en diferente formatos para mayor compatibilidad entre navegadores, seguido de un archivo .html donde se muestran preview de los iconos generados. El javascript es para ofrecer compatibilidad con IE7 (cosa que dudo qur quieran hacer) y luego el style.css que utilizaremos para integrarlo con nuestra página.

Usando IcoMoon.io

1.- Primero vamos a comenzar desde cero y generar nuestro propio paquete de iconos. Para ello solo que ir directo a la app.

IcoMoon Tutorial 1

IcoMoon Tutorial 1

2.- Seleccionen los iconos que ven a usar, si quieren pueden añadir mas librerías que ofrece IcoMoon o nuestras propias librerías.

IcoMoon Tutorial 2

IcoMoon Tutorial 2

3.- Una ves seleccionado todos los iconos que vamos a usar solo tenemos que generar el font o simplemente descargar como imágenes .png pero este no es el caso, así que solo generemos el font.

IcoMoon Tutorial 2

IcoMoon Tutorial 2

4.- Ahora tenemos que elegir el tipo de codificacion que usaremos para nuestro font, el equipo de IcoMoon recomienda usar PUA (Private Use Area) la cual ofrece mayor compatibilidad entre navegadores desktop y móviles. El carácter a usar cuando elegimos PUA se va generando en el mismo orden que vamos agregando más iconos.

IcoMoon Tutorial 4

IcoMoon Tutorial 4

5.- Para finalizar solo tenemos que descagar nuestro archivo. Siempre es recomendable descargar una Sesión de todo lo que hicimos osea todos los iconos que selecciona por si se quiere agregar mas iconos sin tener que volver a seleccionar todo de nuevo lo que realmente es muy cool.

IcoMoon Tutorial 5

IcoMoon Tutorial 5

¿Cómo Usarlo en Nuestro Sitio Web?

Si me preguntan es algo bien sencillo. Imaginemos que tenemos una navegación con la siguiente estructura en HTML.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Archive</a></li>
    <li><a href="#">Contact></li>
  </ul>
</nav>

Asumiendo que se tiene todo el marco de HTML como doctype, head, body, etc. Pero a estos queremos ponerle algo de personalización. En caso de no hacer usando fonts seria con una imagen en sprite determinando la posición de cada icono lo cual es algo muy fastidioso. Icomoon nos ofrece un style.css el que ya tiene incluido el @font-face haciendo referencia a la carpeta de los fonts.

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('fonts/icomoon.svg#icomoon') format('svg'),
	url('fonts/icomoon.woff') format('woff'),
	url('fonts/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Y debajo el data-icon para utilizarlo en el marco HTML.

[data-icon]:before {
    font-family: 'icomoon';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

Y si queremos usarlo en una clase.

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'icomoon';
    font-style: normal;
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

Dependiendo la cantidad de Icono que selecciones nos genera una clase por cada Icono para utilizar.

.icon-database:before {
    content: "\e000";
}
.icon-mobile:before {
    content: "\e001";
}
.icon-link:before {
    content: "\e002";
}

/* etc */

Volviendo al principio como usamos esto en el marco HTML de la navegación. Para usar el data-icon lo podemos hacer con la etiqueta span pasándole como parámetro el carácter que queremos, si no sabemos el código del carácter .html que nos genera nos ofrece ejemplos de cada uno o simplemente usando la clase que nos ofrece.

<!-- data-icon -->
<nav>
  <ul>
    <li><span data-icon=""></span> <a href="#">Home</a></li>
    <li><span data-icon=""></span> <a href="#">About</a></li>
    <li><span data-icon=""></span> <a href="#">Archive</a></li>
    <li><span data-icon=""></span> <a href="#">Contact></li>
  </ul>
</nav>

<!-- usando clases -->
<nav>
  <ul>
    <li><span class="icon-home"></span> <a href="#">Home</a></li>
    <li><span class="icon-about"></span> <a href="#">About</a></li>
    <li><span class="icon-archive"></span> <a href="#">Archive</a></li>
    <li><span class="icon-contact"></span> <a href="#">Contact></li>
  </ul>
</nav>

Hay que tener en cuenta que el font funciona exactamente como eso, como un font y no con una imagen. Podemos crear cuantas clases queramos es usar pseudo elementos en CSS y a la propiedad content pasarle el carácter por e.j.

home:before {
   content: "\e014";
}

/* font-family icomoon */
.home {
   font-family: 'icomoon';
} 

Actualmente hay una lista enorme de web que ofrecen Fonts para usarlos como Iconos las cuales voy a listar aquí:

Testeado:

– IE en todas.
– Chrome en PC and Mac.
– Firefox en PC and Mac.
– Safari 5.1.2 en PC y Mac.
– Mobile Chrome (Android) y mobile Safari (iOS).
– Opera Mobile (quitando el .svg de los fonts).

Espero haberlos convencido a dar este paso, para que lo implementen en sus sitios web.

Lecturas de Referencias

Lecturas que me ayudaron a conocer más sobre usar los fonts como Iconos.

Recomendado
  • marcelo

    Wao muchas gracias por esta información sabia de la web pero no sabia que tenia q hacer un proceso para eso XD

  • Muy interesante el artículo, no pensaba que existiera algo así, muy pronto lo pondré en práctica en mi sitio web

  • evaxarte

    Muchas gracias por tu aportación, tengo una duda, se pueden poner varias @font-face”.1..”,@font-face”2..” o crea conflicto? mientras diseño la página voy viendo otros iconos que me gustan, descargo … pero algunas veces, y no sé la razón, no se ven … volver a descargarlas todas, pueden perderse” la ya insertadas, quizás no esté utlizando bien el método
    ?gracias

    • Guardando la sección puedes hacer un backup de los iconos que vas seleccionando, y te genera el font -face de forma automática.