Como usar la Font Awesome para crear social icons

17 de noviembre de 2015

En el tutorial de hoy quiero enseñarles una de las cosas fantásticas cosas que se pueden crear utilizando la fuente Awesome, más unos pocos retoques en css. Por ahora les mostraré como hacer sus propios icons de redes sociales, de una forma bastante rápida y sencilla y sin nececidad de que seas muy bueno editando en Css. Espero que les agrade el tutorial.
Como les prometí aquí les traigo el primer tutorial de unos cuantos que tengo preparados para ustedes ♥ 

En el tutorial de hoy quiero enseñarles una de las cosas que puedes crear con la fuente Awesome más unos pocos retoques en css.
Por ahora les mostraré como hacer sus icons de redes sociales. Hay otras cosas que se pueden realizar, pero les iré mostrando de a poco.

Bueno acá les pongo un ejemplo para que vean a que me refiero:

Crear icons sociales con font awesome y códigos CSS, se ve muy cute en tu blog y es muy fácil de hacer no hace falta que seas un experto en Css, estilo 1
Ejemplo

Para colocarlo en tu blog solo tienes que seguir unos pasos muy sencillos.

Paso 1 - Colocar el código HTML

Para agregarlo en tu sidebar solo debes ir a Diseño → Agregar un gadget → HTML/Javascript

En el debes pegar lo siguiente:

<center>
<ul class="side-social">
<li><a href="url" target="_blank" title="Facebook"><e class="fa fa-facebook"></e></a></li>
<li><a href="url" target="_blank" title="Twitter"><e class="fa fa-twitter"></e></a></li>
<li><a href="url" target="_blank" title="Pinterest"><e class="fa fa-pinterest"></e></a></li>
<li><a href="url" target="_blank" title="Bloglovin"><e class="fa fa-heart"></e></a></li>
<li><a href="url" target="_blank" title="Tumblr"><e class="fa fa-tumblr"></e></a></li>
<li><a href="url" target="_blank" title="Google+"><e class="fa fa-google-plus"></e></a></li>
<li><a href="url" target="_blank" title="Youtube"><e class="fa fa-google-plus"></e></a></li>
<li><a href="url" target="_blank" title="Instagram"><e class="fa fa-google-plus"></e></a></li>
</ul></center>


Cambia lo que está coloreado por la url de tus redes. Y guarda (se verá algo feo, pero en unos pasos más mejorará)

Si quieres eliminar alguno de los botones tienes que borrar de <li> a </li>
Por ejemplo si quieres borrar el botón de Pinterest debes borrar todo esto;
<li><a href="url" target="_blank" title="Pinterest"><i class="fa fa-pinterest"></i></a></li>

Paso 2- Colocar la fuente Awesome

Ahora debes ir a Plantilla → Edición HTML y con CTRL + F debes buscar la etiqueta <head>

Debajo de ella debes pegar lo siguiente:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Paso 3- Colocar el código Css

Ya solo nos falta determinar el estilo que tendrán tus redes. Ya estando en la plantilla de tu blog solo tienes que buscar con CTRL + F    y pegar arriba el código del estilo que mas te guste y personalizarlo ♥

Estilo 1
Crear icons sociales con font awesome y códigos CSS, se ve muy cute en tu blog y es muy fácil de hacer no hace falta que seas un experto en Css, estilo 2

.side-social li {
text-align: center;
width: 60px; /* Ancho de la cajita */
background: #ffb0be; /* Color de fondo de la cajita */
text-transform: uppercase;
font-size: 9px;
display: inline-block;
padding: 0;
margin-bottom: 3px!important;
}
.side-social e {
width: 32px; /* ancho de la fuente - tiene que ser menor que el ancho de la cajita */ 
height: 32px; /* alto de la fuente */ 
margin: 15px auto 0;
line-height: 100%;
text-align: center;
font-size: 20px;
color: #fff; /* Color del texto */
}
.side-social li:hover {
background-color: #9ccedf; /* Color de fondo de la cajita hover */
}


Estilo 2
Crear icons sociales con font awesome y códigos CSS, se ve muy cute en tu blog y es muy fácil de hacer no hace falta que seas un experto en Css, estilo 2
.social li {
text-align: center;
width: 50px; /* Ancho del redondo */
height: 40px; /* Alto del redondo */
background: #fcc; /* Color de fondo del redondo */
text-transform: uppercase;
font-size: 9px;
display: inline-block;
padding: 0;
border-radius: 100%;
margin-bottom: 3px!important;
}
.social e {
width: 40px; /* ancho de la fuente - tiene que ser menor que el ancho del redondo */
height: 40px; /* alto de la fuente - tiene que ser menor que el alto del redondo */ 
margin: 15px auto 0;
line-height: 10px;
text-align: center;
font-size: 20px;
color: #fff; /* Color del texto */
}
.social li:hover {
background: #777; /* Color de fondo del redondo hover */
}


Puse unas etiquetas para que sepas que cambia que, ahora solo editas a tu gusto y listo ♥ Recuerden que si tienten alguna duda pueden escribirme sol.pourcel@gmail.com abrazos!

9 comentarios:

  1. Hola!
    Super chulo este tutorial!
    Me ha encantado, además que queda un resultado precioso.
    Gracias por compartirlo.
    Besos

    ResponderEliminar
    Respuestas
    1. muchas gracias que bueno que te haya gustado :)

      Eliminar
  2. Gracias por compartir el tutorial :) , lo tomaré en cuenta aaah y tanto tiempo sin pasarme por aquí <3 saludos <3

    ResponderEliminar
    Respuestas
    1. Que bueno que regreses :D .. gracias por tu comentario ♥

      Eliminar
  3. Ahhh *O* Que lindo! No sabía de la existencia de esa fuente para usar en el blog /°A°\ jeje
    Muchas gracias por compartir con tutorial y todo >3<//
    Espero estés super bien~ Abrazos *3*~

    ResponderEliminar
    Respuestas
    1. Muchas gracias linda :D .. que bueno que te haya servido ♥

      Eliminar
  4. Yo soy una patosa total en el htlm, así que muchas gracias por el tutorial. Besitos.

    ResponderEliminar
  5. Yo también era así pero con la práctica se aprende :D ... saludos!

    ResponderEliminar
  6. Buen tuto :) casi no se en blogger. Pero no solo se puede con redes sociales si no tambien otras fonts más, se ven muy bien en el blog c:

    ResponderEliminar
Muchas gracias por dedicarle tu tiempo a mi blog! Espero que la entrada te haya gustado y no dudes en dejar tu opinión en un comentario ♥ (Por favor no dejes spam)