How to Integrate Font Awesome to Blogger Sidebar

Hello friends out there! Font Awesome integration to our  Blogger posts body is really nice. This give more emphasis to the meaning of our written article aside from putting professional images on it. Today, I will share  how to add font awesome icons to your sidebar since it also provoke your readers to stay longer in your blog to by clicking the widget below on it like your most commented widget, popular posts and the like. You can also glance my sidebar to the live demo of this post. Without much words to say buddies, let us proceed to its tutorial.

Recommended

How To Integrate Properly Font Awesome Icons In Blogger Blog

How to Add Font Awesome to Blogger Sidebar

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML

Step 2. Locate the code below

</head> 

Step 3. Just above the code in step 2, paste the code below

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

Note:  Just skip this step, if you have already installed the font awesome icon library in your blog

Step 4. Go back to Blogger Dashboard >> Lay- out
Step 5. Select among your Sidebar widget of which among them you are going to put the font awesome icon
For example in my case, I choose the widget which is  "Categories". Locate the widget ID  of it by clicking its name "Categories" and click the address bar which is located in the top portion on it. The image  below will speak more of what I mean to say.

Step 6. Go to Template and click Edit HTML

Step 7. Inside your template Editor's page type the widget ID of your sidebar gadget (Label 1)

Step 7. Expand the code by clicking the triangle as shown in the image above (the triangle after the violet arrow)

Step 8. Then you will see the code below, click it to expand

Step 9. Then you will see the code below

<b:if cond='data:title'>
    <h2><span><data:title/></span></h2></b:if>

Step 10. Insert the HTML line that bears the font awesome icon after the tag <span>. See the example below

<b:if cond='data:title'><h2><span><i class='fa fa-stack-overflow'/><data:title/></span></h2></b:if>

Do this in the other widget in your sidebar! Try to view the list of available icons font awesome for your varied choices.
Thanks Buddies for usual support and God Bless!!!