How To Create Social Media Widget Using Font Awesome On Blogger

I received some emails asking me about how to create social media widget like mine. It's very easy and simple. I use Font Awesome, a collection of free icons both for web and desktop. Read these easy steps to use Font Awesome on your blog.

How to Use Font Awesome on Blogger:

  1. Open Font Awesome website. 
  2. On the Get Started sections, you will find 'EASIEST: BootstrapCDN by MaxCDN'. And copy the code over there
  3. This is the code. <linkhref="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"rel="stylesheet">
  4. Paste it inside <head> on blogger template you can find on template > edit HTML 
  5. And save it! 
  6. After that, add new HTML/Javascript widget. This time, I will teach you how to create like mine. 
  7. Paste this code on your HTML widget: 
<div style="

    text-align: center;

    letter-spacing: 5px;

    font-size: 18px;

">

<a href="your facebook link"><i class="fa fa-facebook"></i></a>

<a href="your twitter"><i class="fa fa-twitter"></i></a>

<a href="your own pinterest username/"><i class="fa fa-pinterest"></i></a>

<a href="instagram username"><i class="fa fa-instagram"></i></a>

<a href="bloglovin username"><i class="fa fa-heart"></i></a>

<a href="your google+"><i class="fa fa-google-plus"></i></a>

</div>

 

And save it! You will have social media widget now. It's easy and you can customize your own if you want something different.

If you want to use Font Awesome for desktop, you can check Pugly Pixel tutorial (I think this link it's not working anymore).