Add Social Connecting Widget by Using Font Awesome Icons

Add Social Connecting Widget by Using Font Awesome Icons

social widget

From the middle of the 2014 Font Awesome massively used on web designing. Almost all website designer from all platform using Font Awesome for designing site. We knows that Font Awesome is a pictographic language of web-related actions. It is also known as iconic font. Actually this is a pre coded icons. Just you have to add the code but in output it will display iconic symbols. Still there are not any massive use of Font Awesome on single widget design. So I have focus on it to create some beautiful widget by using Font Awesome. As a result Today I am going to share with you Font Awesome based social connection widget for Blogger site.

I will show you how easily we can add a social connecting widget in Blogger sidebar. Just follow the below steps-

Adding Font Awesome Main file on Template

First we have to add the Font Awesome file in Blogger template head section. Including Font awesome in Blogger template is very easy. Just you have to follow some simple steps from below-

Step 1 Go to and Sign in to your account

Step 2 From Blogger Dashboard click on ->Template ->Edit HTML 

Step 3 And locate the <head> section Ctrl+F (Windows) or CMD+F (Mac) in your Blogger template

Step 4 Finally copy following line of markup and paste it below <head>

<link href='//' rel='stylesheet'/>
Step 5 Now simply hit the Save Template button.

Adding CSS and HTML code for Social connecting Widget

Now we will blend the CSS and HTML code in a single script to display Font Awesome icons for social connecting widget.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Widget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.
.fa{color: #000000;font-size: 30px;display: inline-block;}
<div style='text-align: center; letter-spacing: 5px;'>
<a href='Facebook URL'><i class='fa fa-facebook'/></i></a>
<a href='Twitter URL'><i class='fa fa-twitter'/></i></a>
<a href='Pinterest URL'><i class='fa fa-pinterest'/></i></a>
<a href='RSS Feed URL'><i class='fa fa-rss'/></i></a>
<a href='Stumbleupon URL'><i class='fa fa-stumbleupon'/></i></a>
<a href='Google+ URL'><i class='fa fa-google-plus'/></i></a>
Step 5 Now simply hit the Save button.


  • Change #000000 for altering the social icon’s color. Use our  for changing unlimited color.
  • For increase or decreasing the icon size change font-size: 30px to 20px or 40px
  • Replace all Facebook URL, Twitter URL, Pinterest URL, RSS Feed URL, Stumbleupon URL and Google+ URL with your Blogger site’s social pages URL.
That’s it your Font Awesome based social connecting widget is ready for use. Hope your Blog visitors will like it. You can change with unlimited color code for changing the icon color. So whatever your theme color this will fit with your Blogger Template. Thank you. For more exciting tutorial please stay tune. 
Add Social Connecting Widget by Using Font Awesome Icons
4 Stars stars - "Add Social Connecting Widget by Using Font Awesome Icons " From the middle of the 2014 Font Awesome massively used on web designing. Almost all website d...

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *