December 15, 2014

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. <link href="//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.

                        3 comments :

                        1. http://i.imgur.com/YAH5juu.png mine happened to be like this. how can i fix it?

                          ReplyDelete
                        2. When I try to save the template with the changes, it says that a tag like this <
                          /link > is missing so I cannot continue with the process, any suggestions? Please let me know on my email: iriapitablog@gmail.com

                          ReplyDelete
                          Replies
                          1. Hai Iria! you can add < /link> after <link href="//maxcdn.bootstrapcdn... etc

                            Delete