Pasado y presente de las Librerías de Iconos

1
3844

Cambios en las librerías de iconos según la evolución de la web: desde los sprites hasta los glyphos.

Índice de contenidos

1. Introducción

No hace mucho mantuve una conversación donde descubrí que algo que yo creía muy conocido, no lo era tanto. Se trataba de cómo están hechas y funcionan las librerías de iconos. Me sirvió para darme cuenta que quizás sería conveniente reseñarlo en un artículo.

La naturaleza de estas librerías y porqué están hechas así, responde a la evolución misma de la web.

2. Colecciones de Iconos

En los albores de internet se quería disponer de un juego de iconos y usar sólo aquellos que necesitáramos. Así llegábamos a descargar un zip que solía contener una carpeta «icons» donde estaban cada una de las imágenes. Normalmente estaban en formato GIF, que era el único formato web que permitía fondo transparente, hasta que apareciera PNG. GIF era formato propietario (de CompuServe) pero lo soportaban todos los navegadores, mientras que PNG era estándar, pero Internet Explorer, que era el navegador más utilizado entonces, no soportaba su transparencia. Así que durante bastante tiempo siguieron siendo ficheros GIF, que además permitían una versión que mostraba secuencias de imágenes, conocidos como «GIFs animados».

Se usaban como si se cargaran imágenes individuales en la web.

<img src="http://www.e-contento.com/img/ico_home_on.gif" width="32" height="32" border="0" />
<img src="http://www.e-contento.com/img/ico_mundo_on.gif" width="32" height="32" border="0" />
<img src="http://www.e-contento.com/img/ico_html_on.gif" width="32" height="32" border="0" />    

[one_fifth][/one_fifth]
[one_fifth][/one_fifth]
[three_fifth_last][/three_fifth_last]

Esta forma de utilizar los iconos como imágenes individuales en la página web tenía la ventaja de que cargábamos sólo los iconos que usábamos, pero tenía el inconveniente que por cada icono se hacía una petición al servidor web. Si había muchos iconos, se ralentizaba enormemente la carga de la página.

3. Sprites

En aras de solucionar ese problema, esas librerías se compactaron en un único lienzo sobre el que se ponían todos los iconos, de forma que sólo se hiciera una petición al servidor. Ha pasado el tiempo, y este fichero ya sí es un PNG, que se cachea en el navegador la primera vez que se pide. De esta forma, se acelera mucho la carga del site, pero ¿cómo mostramos sólo el icono adecuado cada vez?. Eso se hace asignando un hueco al icono y desplazando el lienzo con los iconos por debajo. Una técnica que se llama CSS Sprite y que Javier Eguíluz la explica muy bien.

Estamos tan acostumbrados a ver sprites que ni nos damos cuenta. Por ejemplo, en esta misma web tenemos los siguientes sprites:

Y como ésta, casi todas. O los emojis del iPhone 6

4. Web Fonts y Glyphos

Pero hay una vuelta de tuerca. Y es que la web se vuelve responsive. Eso quiere decir que los websites se tienen que ver a todas las resoluciones, y los contenidos crecer en consecuencia para adaptarse a sus contenedores. El problema de la técnica de CSS Sprite es que no escala bien, y parte del supuesto de que el diseño va a tener siempre el mismo tamaño. En este sentido esta estrategia se queda coja. Se necesitaría algo que escalara bien, y no perdiera calidad al hacerse muy grande. Parece lógico pensar en gráficos vectoriales como SVG, pero este formato no ha sido soportado por todos los navegadores hasta hace muy poco.

A la par que la web evoluciona hacia responsive e imágenes vectoriales escalables, también empiezan a aparecer distintos formatos para tipografías web (TTF, EOT, SVG, WOFF, WOFF2), sin que triunfase ninguno sobre otro. Cada navegador apostaba por un formato distinto. Hasta que se han ido estandarizando y de ahí viene la solución: de la mano de las WebFonts.

Las tipografías se definen de forma vectorial, siguiendo estándares, por lo que escalan bien al aumentar el tamaño de la fuente, se pueden cambiar de color mediante CSS, se hace una única petición al servidor, y al ser vectoriales, son elementos muy ligeros: justo lo que necesitamos

5. Pero ¿Cómo funcionan las Web Fonts?

Lo único que tenemos que hacer es importar un CSS que utilizará la regla @font-face donde se definirán uno o varios ficheros externos a descargar con la fuente

@font-face{
  font-family:'FontAwesome';
  src:url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),
        url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),
        url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),
        url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
        url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
}

Este ejemplo, se refiere a FontAwesome, que es uno de los más extendidos. Si nos fijamos en el código anterior, nos damos cuenta de que se requieren al menos de dos peticiones al servidor: una para el CSS y otra para la fuente específica para tu navegador.

[custom_table style=»1″]

Chrome Firefox Safari Opera Internet Explorer
EOT 6.0
SVG 4.0 3.2 9.0
WOFF 5.0 3.6 5.1 11.1 9.0
WOFF2 36.0 35.0 26.0
TTF/OTF 4.0 3.5 3.1 10.0 9.0

[/custom_table]

Las más ampliamente soportadas son OTF y WOFF.

Estos iconos están pensados para usarse en contenedores de tipo «inline». Recordemos que la propiedad display puede tomar varios valores, siendo los principales «en linea» o de «bloque», aunque hay más. Estos iconos se usan en los de «en linea»: span, i, b, em, etc…

<span class="fa fa-home" aria-hidden="true"></span>
<i class="fa fa-coffee" aria-hidden="true"></i>

Si nos fijamos en el CSS, la clase .fa-home es

.fa-home:before{content:"\f015"}

El «content» es el que dice qué icono se muestra, y es que al tratarse de un «tipo de letra», al final, los iconos se tratan como letras. Así cada letra se corresponde con un icono. El carácter «\f015» se refiere al correspondiente carácter unicode. Y es que se hace necesario: hay que tener en cuenta que la librería FontAwesome tiene más de 600 iconos. ¡¡¡Imagina un alfabeto de 600 caracteres!!! Se hace necesario el unicode. De hecho, hay una lucha sobre la extensión del unicode entre lingüistas y creadores de emojis.

6. Librerías de iconos

Ya hemos visto que estamos rodeados de iconos, y que prácticamente todos los sites cargan uno o dos juegos de los mismos. A veces son convenientes los sprites, sobre todo para las imágenes propias de maquetación, backgrounds, etc… Y a veces los glyphos, para que escalen bien a todos los tamaños.

Y ya para cerrar este post, pongo unos cuantos enlaces donde podemos encontrar librerías de iconos vectoriales y glyphos.

1 COMENTARIO

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad