05

12

Pictografías

Una de las formas de optimizar una web es reducir el número de imágenes que usa, y algunas veces es difícil reducirlo cuando tenemos que poner distintos iconos como lo de las redes sociales, reproductores, icono de configuración y una larga lista de ellos.
Una solución es usar pictografías (que son tipografías que en lugar de tener letras tienen iconos o símbolos) que podemos usar de forma cómoda, ya que los símbolos al igual que con la letra podemos cambiarles el color y el tamaño sin perder nada de calidad.

Para añadir estas tipografías lo único que tenemos que hacer es añadir una fuente nueva con @font-face (como si de otra tipografía normal se tratara) y añadir los caracteres asociados, esto varía según la pictografía, para una determinada letra puede haber por ejemplo el icono de un sol o puede estar el icono de Twitter, eso depende del creador y antes de usarla debemos de ver la tabla que relaciona la letra o símbolo con el icono (os mostraré un ejemplo más abajo).
Si hay que encontrar un defecto que puede tener las pictografías es que ocupen mucho, pero hay algunas que son muy ligeras.

Raphaël

La pictografía de la primera imagen se llama Raphaël y en este caso no encontramos demasiados iconos de redes sociales, pero encontramos muchos que nos podrían ser útiles para crear una aplicación web, encontramos entre ellos iconos de meteorología, de navegadores, de edición de fotos y muchos más.

Como he dicho antes lo único que hay que hacer es añadir con @font-face la tipografía y con una etiqueta <span> añadimos la pictografía de la siguiente forma.

1. @font-face{

font-family:iconos-raphael;


src:url('fonts/iconos-raphael.ttf');


2. }
3. span.icono{

font-family:iconos-raphael;


4. }

1. <div>

<span class="icono">$<span>

Temperatura elevada

2. <div>

Entypo

En este caso voy a probar la pictografía Entypo que es muy completa y además trae un montón de iconos sociales.

Voy a realizar un ejemplo de estos iconos con text-shadow y un crearé un efecto de 3D (que conté como hacerlo hace un tiempo).