Cool CSS3 Social Icons with Font Awesome

Posted On // 13 comments
Font Awesome Icons Blogger
Heyya Friends ! It has been too long since I have not posted (Due to my exams). So this time I have brought something really cool for all All Blogger Tricks reader. Many of you would know about Font Awesome. It gives you vector icons which can be further edited just like letters using the same CSS.

Here in this widget I have used Font Awesome to create pretty social icons. With integration of font awesome you can add numerous icons as per your convenience.

A live demo of the widget can be seen below.






Once you have seen the demo, to add this widget to your blog follow the steps below.

Adding the Widget


You can add this widget by pasting the below code in the desired location or if you want to show these icons after the post then go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for <data:post.body/> code and paste the below given code just below <data:post.body/>.

NOTE : There maybe more than one <data:post.body/> so make sure that you have selected the right code.

<div class="social social_intro">
<span class="title-ico">
Follow Us On :
</span>
<a href="#"><i class="fa-facebook"></i></a>
<a href="#"><i class="fa-twitter"></i></a>
<a href="#"><i class="fa-rss"></i></a>
<a href="#"><i class="fa-pinterest"></i></a>
<a href="#"><i class="fa-github"></i></a>
<a href="#"><i class="fa-cloud"></i></a>
</div>
<link href="http://theme20.com/demo/valeo/styles/icons.css" rel="stylesheet" type="text/css"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"></link>
<link href="http://files.allbloggertricks.com/abt-icons.css" media="all" rel="stylesheet" type="text/css"></link>
<style>
.social a {color: #fff !important;}
</style>

After adding the code follow the below given instruction.

How to Customize


First of all you have to replace # with the desired profile link you want to add. Secondly you can add, remove or edit the <a.... </a> as per your wish. To change or add new icon you may add a new <a..</a> or edit the existing one. You just have to remember to change the class name i.e. from fa-cloud to fa-instagram, fa-stackexchange, fa-skype, fa-dribble or anything as per your wish. Most of the major icons have been covered in the above given code. You may also change the color of the icons according to your blog's skin color. To do so scroll to the bottom of the given code and change it as you want. By default it is White

Thats it. Save the template and you are finished. Now you can see awesome icons on your blog and with a greater possibility of editing them as per your need.

13 comments

Hamza Khan Author
27 January 2014 at 23:56

please share Your "You may also like -" Widget, Which is In The End Of this Post

Reply
Ramzan Ali Author
5 February 2014 at 04:28

that is terribly nice post i m terribly am passionate about it it's terribly helpful on behalf of me i m terribly glad to you retain it up social name.

Reply
Miliee Cyrus Author
15 February 2014 at 03:06

Outstanding widgets.. Can u share your blog style widget in a post ..please?

Reply
Tanmay Kapse Author
5 March 2014 at 06:24

Its awesome :)
How did you make it work on firefox ?

Reply
abdo Author
10 March 2014 at 10:42

thank u for this code

Reply
14 March 2014 at 08:31

By adding cloudfare CDN :)

Reply
rashed Author
28 March 2014 at 01:33

Nice Widget, Very usefull thanks for share,,, ,

Reply
arman Author
28 March 2014 at 01:33

beautifull

Reply
Rex Hacker Author
20 April 2014 at 11:35

nice sharing dear

Reply
24 April 2014 at 16:15

please share related post widget with awesome style i am waiting

Reply
25 April 2014 at 07:13

the gadget not working on my sevida responsive theme please advise me what i can do

Reply
janice rose Author
13 November 2015 at 19:54

thanks sir. going to try i hope i works for me.

Reply
Jason Santoro Author
15 August 2016 at 23:17

This widget no longer works.

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Cool CSS3 Social Icons with Font Awesome |