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.
add font awesome to blogger sidebar

Recommended


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.
add font awesome to blogger sidebar

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!!!
About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...