Fuente icónica Impresionante, Awesome para los amigos

Awesome, es una fuente de código abierto con la que resulta muy fácil añadir iconos a cualquier sitio web, ya que lo que en un principio serían las letras, números y los caracteres habitualmente usados, en este caso se convierten en dibujos.
La gracia está en que esos dibujos son justo los que habitualmente se necesitan para añadir pequeños (o grandes) detalles a un sitio web y en ese sentido esta fuente ha tenido bastante acierto a la hora de elegir los diseños.
Cierto es que no vamos a encontrar todos los que se nos pasen por la cabeza, pero con los 369 que actualmente componen la colección y los que se van añadiendo progresivamente, difícil es que no cubramos nuestras necesidades básicas: logos de redes sociales, símbolos de dirección (flechas), mandos para reproductores, comandos, correo, cámara fotográfica, películas, casa, candado, bocadillo de cómic... En fin, una lista muy larga.
Y muy importante... Awesome es GPL, o lo que es lo mismo, se distribuye bajo Licencia Pública General. Así que como es software totalmente libre, tienes absoluta libertad para usar, estudiar, compartir (copiar) y modificar cualquier cosa a tu antojo y sin limitaciones. Puede también ser utilizada con fines comerciales y ni siquiera requiere atribución.

Fuente icónica Awesome

Las ventajas de usar este tipo de fuentes en lugar de imágenes son muchas:

  • Escalabilidad. Al ser una fuente, sólo con indicar el tamaño reduciremos o agrandaremos el icono sin límites
  • Los iconos serán fácilmente modificables en cuanto a colores, sombras, rotaciones o cualquier otra cosa que sea posible hacer con CSS
  • Si descargas todos los ficheros necesarios su peso total es inferior a 500KB y os recuerdo que son más de 300 "imágenes"
  • No necesita Javascript, lo que implica menos problemas de compatibilidad
  • Por su naturaleza vectorial son ideales para pantallas de alta resolución

Muestrario de iconos

Captura parcial del catálogo de iconos disponibles

Vale, ya me has vendido la moto y esto tiene muy buena pinta pero...

¿Cómo puedo usar esta fuente en mi blog?


Pues hay varias maneras, pero sólo explicaré la más sencilla.

1

En la cabecera de nuestra plantilla (entre las etiquetas <head>) insertamos esta línea que contiene el CSS necesario y que incluye la carga de la fuente:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

2

Allá dónde queramos insertar un icono, añadimos una caja con clases fa fa-NOMBRE_ICONO, obteniendo ese nombre del catálogo de iconos.

<span class="fa fa-home"></span>

3

Formateamos al gusto asignando las propiedades comunes al selector .fa y asignando las particulares de cada símbolo a .fa.fa-NOMBRE_ICONO. Por ejemplo:

.fa {display: inline-block;font-size: 40px;margin: 5px;color: #666;}
.fa:hover {color: #1A4E93;}
.fa.fa-signal {color: #71AF42;}

¿Fácil, no? Tanto que estoy casi a punto de ponerme uno de estos como logo :)
Por si esta colección no os satisface, otra fuente similar es la llamada Entypo, que es la que usa Kseso CSS en la actualidad para los detalles gráficos de su blog y que podéis ver por ejemplo en su menú principal. En ese post dónde os remito también encontrareis una relación de fuentes de este tipo.

Tomado de http://www.oloblogger.com/2014/02/fuente-iconos-awesome.html

“El que gana, gana. El que pierde, pierde” (Liliana Reyqui)

0 Comentarios