Hoy quiero hablaros de esos iconos tan chulos que tengo en mi menú de navegación. Sí, sí esas flechitas blancas.
Son iconos "FA" una fuente llamada Awesome que incluye más de 400 iconos gratuitos que podemos usar para infinidad de cosas en nuestro blog. Es una fuente de código abierto y tan solo tenemos que saber como funciona para poder disfrutarla.
No son como las fuentes que os enseñe en la entrada de mis 6 fuentes favoritas de escritura.
Entre sus 400 iconos, podemos encontrar, flechas de menús, iconos de redes sociales, carritos de compras, señales... etc
Seguramente hayais visto en varios blogs en el menú superior al lado de las pestañas de "about" y "contact" pequeños iconos de redes sociales que al hacer click en ellos te redirigen a sus perfiles en las redes. En su mayoría, no son imágenes como tal, si no iconos "FA" lo bueno de esta tipografía es que se trata de una fuente sin más, con lo cual no tenemos que subir imágenes pesadas al blog, son muy fáciles de usar y no necesitas descargar nada.
Yo en mi caso la use para señalar en el menú de navegación que había un par de categorías desplegables. Pero como os comento puede servir para miles de cosas más. Como indicador de redes sociales, enlaces a tu tienda online, elementos para nuestros posts o simplemente por decoración.
Os dejos dos imágenes para que veáis mejor, a que me refiero.
La forma que yo tengo de utilizarlos es muy sencilla.
Los uso a través de códigos HTLM. Simplemente es copiar y pegar la ruta de los códigos en la misma plantilla de nuestro blog en formato HTLM, o añadir un gadget de HTLM si lo que queremos es que aparezcan en el menú lateral del blog.
Instalacion:
Tan solo tenemos que irnos a Plantilla → Editar HTML
(Recordar hacer una copia de seguridad cada vez que tocamos HTML, nunca se sabe lo que puede pasar)
Seguidamente buscamos <head>
Y justo debajo añadimos el siguiente código:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
La ruta de código es:
<i class="fa ruta de código"></i>nombre de icono (opcional)<br />
Ejemplo con carrito de la compra (fa-shopping-cart):
Shop
También podemos modificar su tamaño (máximo x5) con la siguiente ruta:
<i class="fa ruta de código"></i>nombre de icono (opcional)<br />
Shop 2x
Shop 3x
Shop 4x
Shop 5x
Para terminar os dejo las 20 rutas de códigos más usadas para que vayáis probando
fa-camera-retro
fa-twitter
fa-youtube
fa-google-plus
fa-linkedin
fa-skype
fa-tumblr
fa-vimeo-square
fa-pinterest
fa-facebook-square
fa-chevron-up
fa-chevron-down
fa-chevron-left
fa-chevron-right
fa-paperclip
fa-envelope-o
fa-bell-o
fa-folder-open-o
fa-home
fa-book
Como veís es una fuente que puede dar mucho juego. Y para los tengáis ganas de más, os dejo el link a la página con todas las rutas.
no me funciona, algun error estare haciendo. gracias por el tutorial hermosa
ResponderEliminarCuéntanos Clara, ¿En que paso te quedas?
Eliminar