How to place Font Awesome Icons below Sidebar Labels?

Nowadays, everyone is stylizing his/her blog to attract more and more visitors and reader. We are also one of them! We stylize our blog to attract our blog readers to read our blog and making them not only our readers, but loyal readers. Do you ever viewed popular blogs like MBT, MBL, and Blogger Yard? Their style are very attractive. Especially of MBL and MBT. Everyone try to create their blog design attractive and on this journey, they forget that blog speed is also important for SEO. That's why we have posted about how to decrease your blog's loading speed. Today, we brought you a tutorial by which you can insert cute font awesome icons before your post title. Just look at our sidebar's titles and look before them. You will find yellow font awesome icons that are making sidebar attractive. So, Today I am going to tell you how to inset these icons before your sidebar title. Some days ago, I sawed this request on a comment. So I brought it here.

But, to do this trick, this is must that you install font awesome icons script on your blog. Font awesome are light weight icons that can add more beauty to your blog. Font Awesome icons are also attractive and can be customized in unlimited colors. These icons are created by ‘Dave Gandy’. Recently, they released new version of font awesome icons in which, some new icons are added. You can install them here.

How to Implement?

Here are some simple steps to implement these icons on your blog.

[warning]This Trick will never work if you don't add FontAwesome on Your Template. Here's the Guide to add them. [/warning]

    [num]1[/num] Go to Blogger Dashboard > Layout

    [num]2[/num] Now, Click on Edit link of widget which you wanna put icon before title.

    [num]3[/num] Look at the URL of the new pop up page. You will find id of that widget at the last of URL. Note that. This will help you to add icon before title.

    [num]4[/num] Now, Navigate from layout tab to Template > Edit HTML
    [num]5[/num] Click on blogger html editor and press Ctrl+F to open the search box.
    [num]6[/num] Now, Search for the id that you noted on step 3.

    [num]7[/num] Now, find <h2 class='title'> and below it, paste following code:

<i class='fa fa-CODE'></i>

    [num]8[/num] Replace 'CODE' with the icon code you want before title.
    [num]9[/num] Now, Save your template and take a look at your blog.

How to Change the Color of Icons?

    [num]1[/num] To change the color of all icons placed on sidebar's title, place below code above ]]></b:skin>

.sidebar h2 i{
color:#FEBD17;
}

    [num]2[/num] Replace #FEBD17 with the color code you want.

Final Words from Author

I hope that you liked and given a new and attractive look to your blog. If you troubleshoot yourself, Kindly leave your problem on comments and we will give our 100% to solve your problem. Take care of your family and your also. Thank You!

Share this post