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.
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
 |
| 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;}
.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.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Se ve interesante para algunas ocasiones y para alguién como yo hasta fácil de implementar. Gracias :)
ResponderEliminarApreciado 'Oloman':
ResponderEliminarGracias a esta tu última aportación, he decidido cambiar los iconos que hay bajo la cabecera de mi web . Sobra decir que te invito a visitarla.
Un saludo,
Tomás.
Ya los he utilizado para el diseño de un cliente, y han quedado muy bien. Son muy útiles
ResponderEliminarLe veo tanto juego a esta colección que sería un pecado no probarla. Aunque solo sea para sustituir las imágenes de las redes sociales, ya merece la pena definitivamente. Gracias por añadir una nueva tarea a mi lista de cosas pendientes ;)
ResponderEliminarMe encantan estos iconos, Gracias Oloman!
ResponderEliminarPor cierto lo estoy probando y el código del apartado 3 donde tengo que añadirlo, en el HTML o en la misma entrada del blog?
es que me tira error en la entrada del blog...
Haber si me puedes echar un cable.
Hola Laser. El código del apartado 3 es CSS. Si lo vas a poner en una entrada o página estática tendrás que insertarlo entre etiquetas STYLE:
Eliminar<style>
aquí el código CSS
</style>
O si lo prefieres también podría ir en la plantilla, en la sección de CSS (entre las etiquetas SKIN) si es que el formato va a ser común para todas las entradas.
Ahora si,
EliminarMuchas gracias de nuevo compañero!