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

agosto 28, 2015

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'/>


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.

You Might Also Like

3 comentarios

  1. Siempre quise poner ese tipo de botones ,pero no soy de utilizar tanto las redes sociales , he probado algunas ,pero nunca entro casi jaja :3 , intente por ejemplo con twitter , no entendí como era ,como se respondía esas cosas ,me perdia , y el que siempre estoy activa es facebook , pero de todos modos gracias por el tutorial , capas me anime a ponerlo se ve tan lindo <3

    ResponderEliminar
    Respuestas
    1. me tarde algo con twitter pero me gusta puedo spamear a cada rato xD! de nada espero les sirva!
      Suerte :D! Te seguire por facebook! n.n

      Eliminar
  2. Gracias por el tutorial,la vdd es que soy un zape para esas cosas xD
    Los míos los busco ya hechos xD

    Gracias linda!

    ResponderEliminar

Facebook Page

Entrada destacada

Beauty Treats Concealer Palette Contour Collection