Cómo instalar iconos en el blog para mostrar tus redes sociales

instalar-iconos-en-el-blog-para-redes-sociales

Las imágenes en forma de botones están muy bien, desarrollan tu vena creativa, quedan muy cuquis y todo lo que tú quieras, pero ralentizan la carga de tu blog una barbaridad y más si no sabes cómo aligerar el peso de tus imágenes antes de subirlas.


Así que hoy te voy a contar cómo poner directamente iconos en tu blog y personalizarlos a tu gusto con la aplicación Font Awesome. No sólo vas a aligerar el tiempo de carga, sino que además los vas a poder emplear para hacer chulerías con ellos y lucir un blog más profesional. ¿Estás preparada para darle un make-up remolón a tu blog? pues vamos a ello!








No te voy a descubrir las américas (o quizás sí) porque esta aplicación lleva ya mucho tiempo funcionando y puede que hayas visto algún tutorial. Pero si es así y aún no te has animado, voy a tratar de convencerte. De hecho me he propuesto conseguirlo y te aviso que soy muy cabezota, así que, si no quieres arriesgarte, cierra esta pestaña inmediatamente  .



¿Aún sigues aquí? ok, pues empiezo (no me digas que no te lo advertí).




QUÉ ES FONT AWESOME



Por si aún no la conoces, se trata de una aplicación repleta de símbolos de todo tipo, que una vez instalada te da la posibilidad de incorporarlos fácilmente a tu blog echando mano del HTML y el CSS. Si nada más leer esas siglas, te han dado ganas de salir corriendo, para el carro porque cuando te digo que es fácil, es que lo es, hazme caso que te vas a alegrar.





PARA QUÉ PUEDO USAR LOS ICONOS DE FONT AWESOME



Una vez instalada la cartera de iconos, el límite es tu imaginación, pero  te voy a dar algunas ideas:


  Para sustituir las aburridas viñetas de Blogger a la hora de enumerar opciones, como estoy haciendo yo ahora mismo con estas estrellitas.


  Para poner caritas felices      o tristes      cuando quieres reforzar una emoción


  Para usarlos en botones de llamada a la acción. Ejemplo:


Descárgatelo  


Imprime la receta  


Compra ahora  



  Para sustituir palabras como etiquetas, fecha, entradas recientes y antiguas, etc... Si te fijas, yo los empleo por todo el blog.


  Para crear tus iconos sociales en el sidebar o en el menú


  Para embellecer los títulos del sidebar


  Para crearte un botón de subir o el botón de Leer más, si acortas tus entradas



Esto es lo que se me ocurre ahora mismo (es que a final de semana, las neuronas están desganadas) pero como te he dicho, el límite está en tu imaginación.






CÓMO INSTALAR FONT AWESOME EN MI BLOG




Que, ya te va gustando la historia verdad? venga, pues vamos al lío, verás que no tiene complicación.


Vámonos a Plantilla>Editar HTML (recuerda hacer tu copia de seguridad)


Haz clic en cualquier sitio (dentro de la plantilla) y pulsa CRTL+F para que te salga la caja de búsqueda. Pega <head> dentro de ella y dale a intro.


Añade este código justo debajo:



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




Guarda los cambios, ya lo tienes instalado. Ahora el siguiente paso es visitar Font Awesome para ver los códigos que vas a usar. Te aconsejo que busques por temáticas, de lo contrario, te pasarás un buen rato haciendo scroll. Por ejemplo, para los iconos sociales deberás seleccionar Brand Icons.


instalar-iconos-font-awesome-en-el-blog





CÓMO USAR LOS ICONOS EN MI BLOG



Vamos con los tutoriales. En el 1º video, te voy a explicar 3 formas  de usarlos, incluyendo la instalación de tus redes sociales en el sidebar y a continuación le daremos formato con CSS.

En este vídeo vas a ver:


  Cómo poner iconos a lo largo del texto
  Cómo poner iconos para viñetas
  Cómo poner iconos de redes sociales en el sidebar


Bajo el vídeo, tienes los códigos que necesitas para seguir el tutorial.






  Para poner espacios entre texto e iconos, usa esta etiqueta: &nbsp;


  Copia este código y pégalo en la parte de Diseño en un gadget HTML/Javascript:



<center><div class="botones-sociales">
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-pinterest"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-youtube"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-heart"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-google-plus"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-instagram"></i></a>
</div></center>




Si no tienes alguna de las redes sociales que te he dejado, selecciona por completo la línea y bórrala. En el texto azul, debes añadir el enlace que lleve a tu red social.


Ahora le toca el turno, a la personalización de esos iconos sociales, para que se muestren totalmente a tu gusto. Lo podrás personalizar de 4 formas distintas, aquí puedes ver cómo quedan:







¿Cual te ha gustado más? Bajo el vídeo tienes las 4 maneras de añadir el CSS, ahora dale al play, para que veas cómo hacerlo:



CAMBIAR COLOR, TAMAÑO Y AÑADIR ESPACIADO:



.botones-sociales a{

position: relative;

margin: 0 auto;

max-width:100%;

color: #6EBFD7;

font-size: 14px;

padding: 5px;

}



.botones-sociales :hover{

color: #FFBDAF;

}



ASIGNAR COLORES DE MANERA INDIVIDUAL:



.botones-sociales a{

position: relative;

margin: 0 auto;

max-width:100%;

font-size: 14px;

padding: 5px;

}



.botones-sociales .fa-facebook {

color: #ffbdaf;

}



.botones-sociales .fa-facebook:hover{

color: #b7cdc0;

}



.botones-sociales .fa-pinterest {

color: #b7cdc0;

}



.botones-sociales .fa-pinterest:hover{

color: #ffbdaf;

}



.botones-sociales .fa-youtube {

color: #ffbdaf;

}



.botones-sociales .fa-youtube:hover{

color: #b7cdc0;

}



.botones-sociales .fa-heart {

color: #b7cdc0;

}



.botones-sociales .fa-heart:hover{

color: #ffbdaf;

}



.botones-sociales .fa-twitter {

color: #ffbdaf;

}



.botones-sociales .fa-twitter:hover{

color: #b7cdc0;

}



.botones-sociales .fa-google-plus {

color: #b7cdc0;

}



.botones-sociales .fa-google-plus:hover{

color: #ffbdaf;

}



.botones-sociales .fa-instagram {

color: #ffbdaf;

}



.botones-sociales .fa-instagram:hover{

color: #b7cdc0;

}




PONER BORDE A LOS ICONOS:



.botones-sociales a{

position: relative;

margin: 0 auto;

max-width:100%;

color: #b7cdc0;

border: 2px solid #ffbdaf;

border-radius:0px;

-moz-border-radius:0px;

-webkit-border-radius:0px;

font-size: 14px;

padding: 15px;

line-height: 3.6;

}



.botones-sociales :hover{

color: #ffbdaf;

border: 2px solid #b7cdc0;

border-radius:50px;

-moz-border-radius:50px;

-webkit-border-radius:50px;

}



AÑADIR TEXTURAS DE FONDO A LOS ICONOS:



.botones-sociales a{

position: relative;

margin: 0 auto;

max-width:100%;

color: #ffffff;

background: url(http://i65.tinypic.com/2w6gksh.jpg) repeat;

font-size: 14px;

padding: 15px;

line-height: 3.6;

}



.botones-sociales :hover{

color:#e3abc4;

background: url(http://i63.tinypic.com/2nkt6v5.jpg) repeat;

}




¿Te ha gustado? espero que sí, porque las próximas semanas te contaré:



 Cómo diseñar un menú desplegable con iconos sociales y buscador.

  Cómo diseñar botones de acción personalizados, como este:





o este:





  Cómo personalizar con iconos los títulos del sidebar

  Cómo sustituir los textos de entradas antiguas y recientes con iconos

  Cómo crear y personalizar un botón de subir con iconos

  Cómo instalar los iconos en la caja final bajo el post





Y con esto acabamos, espero haberte convencido de la gran ventaja de pasarte a Font Awesome para personalizar tu blog. Ahora ya me puedo marchar tranquila a disfrutar del domingo. Te deseo que tú también lo hagas y ojalá te haya servido mucho la entrada de hoy.

Cómo instalar iconos en el blog para mostrar tus redes sociales.Tuitéalo



¿Conocías la aplicación Font Awesome? ¿qué próximo tutorial de los que te he adelantado tienes ganas de ver primero? ¿Cómo piensas montarte el domingo? ¿me lo cuentas y charlamos un rato?


Que tengas un gran día!




¿Quieres aprender a diseñar bonito y tener un blog atractivo? Échale un vistazo al Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:




Comentarios

  1. Muchas gracias por este maravilloso artículo guapa!

    No hay día que no aprenda algo nuevo contigo!

    Un besote!

    ResponderEliminar
  2. Que maravilla de entrada! ya la tengo guardada en favoritos para mejorar mi blog! Me suscribo ahora mismito para enterarme de todos los truquitos! ;)

    ResponderEliminar
  3. Cuando conocí Font awesone fue como si me hubiera quitado un peso de encima porque el blog de Blogger me iba más rápido y no me tuve que preocupar más por que iconos sociales quedaban mejo con mi blog. Todo lo que se hace en css es mucho mejor, se acelera el tiempo de carga, se ve mucho más estilizado, y se tiene la opción de cambiar de color cuando se pasa el cursor por encina. La semana que entra te escribo, tengo una propuesta para ti. Un beso

    ResponderEliminar
    Respuestas
    1. Yo me resistí mucho al HTML y al CSS, creí que nunca me iban a entrar en la cabeza y ahora no concibo mi blog sin ellos. Además me cuesta mucho diseñar un blog para alguien que prefiera imágenes, con las posibilidades que tienen los iconos y los códigos! Encantada de que me tengas una propuesta, yo aún no he tenido tiempo de pensar en nada, de lo liada que estoy, pero estoy deseando colaborar contigo. Un besote!

      Eliminar
  4. cada vez que me paso por aquí me doy cuanta de lo que me falta por mejorar en mi blog, gracias por ayudarme a que cada día esté más a mi gusto y más personal. Tengo que probar a cambiar los iconos a ver que tal me queda, bss
    walkingtopennylane

    ResponderEliminar
  5. Como siempre muy útil y muy bien explicado, volveré de nuevo cuando me decida a empezar con las reformas de mi blog. Muchas gracias por molestarte tanto en ponernos las cosas fáciles.

    ResponderEliminar
    Respuestas
    1. Gracias a ti por pasarte Anna, vuelve cada vez que lo necesites, para eso escribo, para ayudaros. Un beso!

      Eliminar
  6. Me encantan estos iconos, yo tengo puestas mis redes con font awesome y me gusta mucho porque veo unos iconos super minimalistas y al mismo tiempo prácticos.
    Un beso :)

    ResponderEliminar
    Respuestas
    1. A mí también me encantan y creo que tienen tantas o más posibilidades que las imágenes. Un beso Vanessa!

      Eliminar

Publicar un comentario