•~°~• Social Media Buttons •~°~•

Este es un tutorial para hacer tus botoncillos de red social como los míos. Emplearemos una libreria y fuente de CSS llamada Font Awesome.

Por que utilizar Font Awesome?

Tienes acceso a 585 iconos.
Aplicas el estilo fácilmente con CSS. (No es necesario crear un estilo para los botones)
Es gratis.
A diferencia de utilizar imágenes para los links no tienes que hacer doble trabajo por eso de ponerle hover.
Puedes hacer lindas viñetas como esta.

Que hacemos primero?

Necesitamos cargar la libreria de fuentes, para esto emplearemos una que Bootstrap tiene cargada para uso publico.

Vamos a Plantilla Editar HTML
Pegamos el siguiente codigo antes de la etiqueta </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

A continuación vamos a hacer nuestra lista de iconos.

Vamos a Diseño Agregar gadged HTML/Javascript

<a href="tu url"><i class="fa fa-facebook-square fa-3x"></i></a> 

Rosa: tu dirección. 
Azul: nombre del carácter en la librería FA. En este caso el cuadro de Facebook.

Ahora para hacer la lista completa de boton de red social solo agrega las lineas juntas.

<a href="https://www.facebook.com/pages/Cute-and-Bittersweet/883583808327359?sk=timeline"><i class="fa fa-facebook-square fa-3x"></i></a> 

<a href="https://www.pinterest.com/whitzhytouky/"><i class="fa fa-pinterest-square fa-3x"></i></a> 

<a href="https://www.instagram.com/heyimzip"><i class="fa fa-instagram fa-3x"></i></a>

<a href="https://twitter.com/heyimzip"><i class="fa fa-twitter-square fa-3x"></i></a>


<a href="https://plus.google.com/106397353023933243367"><i class="fa fa-google-plus-square fa-3x"></i></a>

Look and feel

Esto es todo! Espero les haya gustado y les sirva.