Tutorial Blogger: Uso de iconos web, Font Awesome

Buenísimos días lavanderos!!
He aparecido nuevamente después de estar una semana sin dar señales de vida :D Era desaparecer o quedarme sin pelo, entre trabajo y universidad no me queda tiempo para nada; estoy muy feliz eh? pero tremendamente estresada. Pero bueno una semanita que me ha venido genial.
Hoy os traigo un tutorial blogger que os va a encantar y es que os voy a enseñar cómo poner muchos iconos bonitos en diferentes partes de nuestro blog. Todo esto usando Font Awesome, una fuente de iconos web.
Es súper sencillo de instalar y de usar y os voy a dejar algunos ejemplos para usarlo. Por ejemplo, los iconos de redes sociales que yo uso están hecho así, incluso se podrían usar en la barrita de arriba del blog que os he enseñado en el famoso tutorial, ahorrándonos tener que usar socicon.
Y es que ahora, en este mundo del diseño web la simplicidad está a la cabeza y el uso de iconos web está a la orden del día. Así que vamos allá.

Lo primero que tenemos que hacer es instalar Font Awesome en nuestro blog, para ello vamos a Plantilla → Editar HTML (recordad hacer una copia de seguridad de la planilla por si acaso) y buscamos lo siguiente:
<head>
Justito debajo pegamos lo siguiente:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Guardamos y ya está instalado. Para saber todos los iconos que podemos usar, podemos ver el catálogo aquí, así como el nombre de cada icono.
• Para incluir un icono tenemos que poner el siguiente código HTML:

Sustituyendo lo que está en morado por el nombre del icono correspondiente. Si ponéis esto, sólo saldrá el icono.
• Pero a nosotros seguramente nos interese enlazar el incono a alguna URL para ello usamos este código:
<a href='URL'></a>
Y ahí sustituimos lo que está en verde por la URL en cuestión y lo morado por el nombre del icono.
DARLES FORMATO CON CSSPara darles color o cualquier formato usando CSS (para añadir CSS vamos a Plantilla → Personalizar → Avanzado → Añadir CSS) tenemos dos opciones:1. Cambiar todos los iconos de Font Awesome:Puede que sólo usemos los iconos en una parte de nuestro blog, entonces podemos generalizar usando el siguiente código:
.fa{color: #333333; /*Color del icono*/background: #eeeeee; /*Fondo del icono*/border: 1px solid #333333; /*Borde*/font-size: 20px; /*Tamaño del icono*/}
.fa:hover{ /*Formato al pasar el ratón por encima*/color: #ffffff; /*Color del icono*/background: #333333; /*Fondo del icono*/border: 1px solid #eeeeee; /*Borde*/}
2. Cambiar un sólo icono de Font Awesome:Este caso es para usarlo si vamos a usar los iconos en más de un sitio de nuestra plantilla y queremos que cada uno tenga un tamañ y color diferentes:
.fa-facebook{color: #333333; /*Color del icono*/background: #eeeeee; /*Fondo del icono*/border: 1px solid #333333; /*Borde*/font-size: 20px; /*Tamaño del icono*/}
.fa-facebook:hover{ /*Formato al pasar el ratón por encima*/color: #ffffff; /*Color del icono*/background: #333333; /*Fondo del icono*/border: 1px solid #eeeeee; /*Borde*/}
Donde tenemos que sustituir por el nombre del icono en cuestión lo que está en morado. Y por tanto tendremos que añadir este código tantas veces como iconos estemos utilizando.
Bien pues sabiendo todo esto, ya somos capaces de poner cualquier icono de Font Awesome en cualquier parte de la plantilla. A continuación os voy a dejar algunos ejemplos.
ICONOS SOCIALESSi queremos hacer nuestros iconos sociales usando Font Awesome tenemos que hacer lo siguiente. Vamos a Diseño → Añadir Gadget HTML/Javascript y pegamos el siguiente código:
<center><a href='URL de la red social'></a><a href='URL de la red social'></a><a href='URL de la red social'></a><a href='URL de la red social'></a><a href='URL de la red social'></a></center>
Sustituimos lo que está en verde por la correspondiente URL de la red social y lo que está en morado por el nombre del icono. Ya veis que yo he puesto los de las principales redes sociales pero ya sabéis que en Font Awesome hay un montón para elegir.
A continuación añadimos el CSS, podéis añadirle todas las propiedades que queráis, lo que yo os dejo aquí es para que queden normales, tal cual los tengo yo:
.fa{ font-size: 25px; color: #333333; padding: 8px;}
.fa:hover{ /*Al pasar el ratón por encima*/color: #cccccc;}
Ya sabéis que si tenéis los iconos en algún lugar más de la plantilla y queréis que estos tengan diferente formato deberéis ir uno por uno añadiendo el CSS:
.fa-facebook{ font-size: 25px; color: #333333; padding: 8px;}
.fa-facebook:hover{ /*Al pasar el ratón por encima*/color: #cccccc;}
.fa-twitter{ font-size: 25px; color: #333333; padding: 8px;}
.fa-twitter:hover{ /*Al pasar el ratón por encima*/color: #cccccc;}
Etcétera.
EN LA BARRA SUPERIORPues es básicamente igual, lo haríamos tal que así. En el código que pegamos en la plantilla lo pondríamos así:
<div id='barra-superior'>
<div id='menu'>
<ul>
<li><a href='URL'></a></li>
<li><a href='URL 1'>Nombre 1</a></li><li><a href='URL 1'>Nombre 2</a></li><li><a href='URL'></a></li>
<li><a href='URL'></a></li><li><a href='URL'></a></li></ul>
</div>
</div>
Queda genial poner el icono de la casita como alternativa al inicio o no? :D Tras poner esto añadís el CSS del tutorial y el CSS para modificar los iconos que hemos visto hasta ahora.

Espero que os haya gustado este tutorial y cualquier duda ya sabéis donde encontrarme ;)
Pasad un lunes muy chachi!! Besotes muy fuertes!! Laura.