Experiencias de Desarrollo Web

Blog de tips

Web icon fonts

leave a comment »

Cada vez es mas común el uso de iconos en páginas web. La forma tradicional de trabajar estos iconos era usando pequeñas imagenes. Algunos problemas de trabajarlo de esta forma es que si tu web la trabajas para dispositivos con una mayor resolución (por ejemplo pantallas de retina) tus iconos se podian ver pixeleados, otro problema es que cada imagen es una solicitud al servidor, lo que provoca muchas peticiones web, esto en parte se podia solucionar usando sprites de imagenes.

Una alternativa de solución para este problema es usar icon web fonts, es decir manejar los iconos como si fueran texto (cada icono es un caracter del conjunto de caracteres que componen la fuente). Los beneficios que nos da usar esta técnica es que los iconos ahora son vectoriales 😀 podemos cambiar su tamaño usando css (css:font-size) y su color (css:color) y todo esto sin perder calidad y hablando sobre peticiones al servidor solo se realiza una al invocar la fuente que contiene el conjunto de iconos.

Hay muchos sitios que ofrecen este tipo de fuentes, yo estoy utilizando fontawesome que proporciona un conjunto de iconos bastante amplio y es fácil de utilizar en conjunto con bootstrap. Ademas nos proporciona un cdn. Fontawesome proporciona ejemplos muy claros sobre como utilizarlo.

Esta técnica se basa en el “shadow dom” y utiliza un rango de caracteres reservado para propositos especiales.

 

 

 

Anuncios

Written by tiocachas

enero 13, 2014 a 8:41 pm

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: