Reduce la carga de tus Iconos, Conviértelos en una Fuente

webfontsPodemos 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:

  1. Imágenes escalables: al ser vectoriales, podemos cambiar su tamaño, sin que se dale su calidad
  2. Cambiar color: al ser una fuente, podemos cambiar el color a nuestra elección
  3. Solo una llamada al servidor
  4. Compatible con todos los navegadores: con los formatos del contenido que crearemos (woff, eot…), será compatible con los navegadores
  5. 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:

Deja un comentario