CSS 3: Fuentes de iconos

Qué son las fuentes de iconos

Las fuentes de iconos son fuentes (tipos de letra) en los que cada carácter es un icono que se han hecho populares en los últimos años.

Pese a su popularidad, presentan aspecto criticables, como se comenta en Seriously, Don’t Use Icon Fonts (noviembre 2015).

Usar fuentes de iconos

Si a una etiqueta se le asocia la fuente que contiene los iconos, se muestran los iconos correspondientes. Como los iconos suelen estar colocados en caracteres más allá de los habituales (letras, números, etc.), para referirse a ellos se debe utilizar su código Unicode.

El ejemplo siguiente muestra los primeros iconos de una de las fuentes de iconos más populares: Font Awesome

<p>a b c d e f g ... </p>

<p>&#xf000; &#xf001; &#xf002; &#xf003; &#xf004;
&#xf005; &#xf006; &#xf007; &#xf008; &#xf009;<br />
&#xf010; &#xf011; &#xf012; &#xf013; &#xf014;
&#xf015; &#xf016; &#xf017; &#xf018; &#xf019;<br />
 ... </p>
ERROR (no puede mostrarse el objeto)
@font-face {
  font-family: "FontAwesome";
  src: url("fontawesome-webfont.woff");
}

p {
  font-family: "FontAwesome", sans-serif;
  font-size: 200%;
}

Para facilitar la inserción de iconos, se recurre a insertar los iconos mediante la hoja de estilo. La idea consiste en crear una clase con el nombre del icono y hacer que la hoja de estilo inserte el carácter mediante el pseudo elemento :before. De esta manera no hace falta conocer el código Unicode del carácter, sino únicamente el nombre de la clase. Lógicamente, la clase se puede asignar a cualquier etiqueta.

<p class="fa-check-circle"> Me gusta</p>

<p><span class="fa-times-circle"></span> No me gusta</p>
ERROR (no puede mostrarse el objeto)
@font-face {
  font-family: "FontAwesome";
  src: url("fontawesome-webfont.woff");
}

p {
  font-size: 200%;
}

 .fa-times-circle:before {
  font-family: "FontAwesome", sans-serif;
  content: "\f057";
}

 .fa-check-circle:before {
  font-family: "FontAwesome", sans-serif;
  content: "\f058";
}

Las fuentes de iconos se distribuyen con hojas de estilo que contienen todas las clases correspondientes a todos los caracteres para que sólo haya que enlazar la hoja de estilo para poder utilizar los caracteres.

Además se ha extendido la convención de insertar los iconos utilizando la etiqueta <i>, que en HTML 4 era una etiqueta desaconsejada. Aprovechando que en HTML 5 la etiqueta <i> se ha recuperado (aunque sea para etiquetar texto "especial", como el nombre de una especie animal, el nombre de un barco, etc.), los diseñadores web la están utilizando para las fuentes de iconos (supongo que porque "icono" empieza por la letra "i").

Nota: En FontAwesome se asignan dos clases, la clase general fa y la clase específica con el nombre del icono.

...
  <link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
  <link rel="stylesheet" type="text/css" href="css/estilo.css" />
</head>
<body>
<p><i class="fa fa-check-circle"></i> Me gusta</p>

<p><i class="fa fa-times-circle"></i> No me gusta</p>
</body>
ERROR (no puede mostrarse el objeto)
p {
  font-size: 200%;
}

Los iconos de una fuente de iconos se tratan como un cáracter más, por lo que se le pueden aplicar las propiedades de hojas de estilo.

...
  <link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
  <link rel="stylesheet" type="text/css" href="css/estilo.css" />
</head>
<body>
<p><i class="fa fa-check-circle verde"></i> Me gusta</p>

<p><i class="fa fa-times-circle rojo"></i> No me gusta</p>
</body>
ERROR (no puede mostrarse el objeto)
p {
  font-size: 200%;
}

 .rojo {
  color: red;
}

 .verde {
  color: green;
}

Al descargar una fuente de iconos, hay que fijarse en la estructura de carpetas que presuponen las fuentes de iconos. A menudo la hoja de estilo se encuentra en una carpeta css y la fuente en una carpeta font o fonts. Se puede cambiar la ubicación de ambas, pero hay que corregir la hoja de estilo para que tenga en cuenta la nueva ubicación. Si conservamos las carpetas css y fonts, lo lógico es guardar todas las fuentes utilizadas la carpeta fonts y todas las hojas de estilo en la carpeta css.

Por otro lado, se puede:

Para que las fuentes de iconos funcionen en la mayor cantidad de navegadores posible, las fuentes de iconos se distribuyen en varios formatos (woff, svg, ttf, eot, etc.) y la regla @font-face de la hoja de estilo hace referencia a todas ellas. En los ejercicios propuestos en este curso se utiliza únicamente la fuente en formato woff.

Crear fuentes de iconos personalizadas

Los inconvenientes de usar fuentes de iconos es que algunas fuentes puede ser bastante grandes o que si queremos utilizar iconos de varias fuentes distintas tenemos que incluirlas todas. Una posible solución consiste en preparar fuentes personalizadas con los iconos que nos interesen. Existen varios sitios web que permiten hacerlo, seleccionando entre todos los iconos disponibles o incluso permitiendonos subir los iconos que queramos incluir en la fuente.

Aplicaciones web

Aplicaciones escritorio/servidor

Iconos de colores

Fuentes de colores

Una limitación de las fuentes de iconos que, hasta ahora, los tipos de letra son de un solo color, por lo que cada carácter se puede dibujar de un color distinto, pero cada carácter es de un sólo color. En 2013 empezaron a proponerse soluciones para que un carácter puedan tener partes de distintos colores, pero parece que pasará bastante tiempo hasta que haya una solución universal.

Estos artículos de lwn.net sobre las conferencias TypeCon 2013 (agosto 2013) y ATypI 2013 (octubre de 2013) comentan las primeras propuestas aparecidas en 2013. Este artículo de Roel Nieskens de mayo de 2014 contiene información actualizada sobre el estado de la cuestión en esa fecha. Por el artículo sobre la conferencia ATypl 2015 (octubre de 2015) no parece que se haya avanzado nada.


Iconos apilados

Para obtener iconos de varios colores, una posible solución consiste en sobreponer varios caracteres, cada uno de un color, para formar un dibujo en colores.

Este artículo de Parker Bennett de febrero de 2014 contiene información sobre los llamados stackicons (iconos apilados). En http://stackicons.com/ Parker Bennet ofrece una colección de stackicons "sociales".

Este artículo de Roel Nieskens de febrero de 2014 comenta cómo crear iconos apilados (aunque la solución propuesta no funciona en IE11).


Emoji

Por investigar

Otros