Podemos convertir todos nuestros icónos, en unos archivos de tipografía, obteniendo más velocidad de carga, menos llamadas al servidor y que además sean escalables al ser imágenes vectoriales. Y ¿cómo realizar todo ésto?
Este tipo de práctica, está desplazando a los rollover para iconos en las web, obteniendo más ventajas que el otro sistema:
- Imágenes escalables: al ser vectoriales, podemos cambiar su tamaño, sin que se dale su calidad
- Cambiar color: al ser una fuente, podemos cambiar el color a nuestra elección
- Solo una llamada al servidor
- Compatible con todos los navegadores: con los formatos del contenido que crearemos (woff, eot…), será compatible con los navegadores
- Configuración rápida con CSS:
Configuración inicial:
@font-face {
font-family: '40df';
src:url('fonts/40df.eot');
src:url('fonts/40df.eot?#iefix') format('embedded-opentype'),
url('fonts/40df.woff') format('woff'),
url('fonts/40df.ttf') format('truetype'),
url('fonts/40df.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Configuración de cada imágen:
.icon-twitter:before {
content: "\e000";
}
.icon-facebook:before {
content: "\e001";
}
.icon-dribbble:before {
content: "\e002";
}
Llamar a los iconos:
<pre lang=»HTML5″>Twitter</pre>
Para poder realizar este tipo de configuración, deberemos diseñarlos con algún editor de imágenes como Photoshop o GIMP o con editores online, donde además podremos descargarnos los iconos predefinidos: