Con la llegada de los diferentes dispositivos móviles y con la alta resolución de las pantallas con retina display de Apple, poco a poco el diseño y desarrollo web va cambiando, por ejemplo cuando tenemos que escalar las medidas de nuestras imágenes e iconos y adaptarlas a las resoluciones del mismo.
Muchos de nosotros vemos iconos por los diferentes sitios web que visitamos y muchos de ellos son imágenes pre-diseñadas en algún programa de diseño gráfico, pero actualmente hay otros sitios que ya están empezando a usar iconos fuentes (icons fonts) que funcionan de igual manera que las fuentes que usamos diariamente para escribir por ejemplo este articulo, pero en cambio de letras (texto) son iconos. Uno de los sitios que usan muchas «fuentes iconos» es Facebook, Youtube, Google entre otros sitios menos conocidos.
Las Fuentes Iconos tratan de hacer frente a este problema mediante la conversión de imágenes a texto, he aquí muestro algunas galerías de iconos fuentes que puedes usar de forma gratuita.
Signify Lite
Fontello Icons
Entypo
Typicons
IcoMoon
PulsarJS @ FontFace
Font Awesome
Sosa icono de fuente
Fundación Iconos Fuentes
Heydonworks
Razones para usar Iconos Fuentes:
1.) Puede ser escalado a la resolución que desees, e incluso cuando el usuario escala la resolución de su navegador.
2.) Es soportado por los diferentes navegadores e incluso con IE.
3.) Puedes usar el color que desees para tu icono, desde colores enteros hasta gradientes.
4.) Puedes aplicarles las propiedades CSS3 que son para fuentes (por ejemplo: text-shadow, entre otros soportador por fuentes)
Todos estos iconos presentados se usan y se instalan de de la misma manera que cualquier fuente con la regla @font face de css3, para los que no sepan como usar próximamente estaré realizando un tutorial de como instalar fuentes e iconos a nuestros sitios web.
