CSS3 Social Icons with Font Awesome

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 A...

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 :
<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>
<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>
.social a {color: #fff !important;}

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.



Ads,1,Affiliate,4,AI (Artificial Intelligence),3,Apple,1,Blogging,9,Design,1,Downloads,3,Earn from PTC Sites,2,Earning,3,easy1up,2,Europe,2,Examination Tips,2,Forex,5,Freelance,1,Gadget,1,Gallery,5,Health,2,History,1,How To,1,Insurance,4,Jobs,7,Journey,1,Lifestyle,1,Make Money from Android,6,Malta,1,Mortgage,1,Movies,3,Nepal,3,OMG,1,Online Jobs,25,Online Learning,3,online marketing,2,Other,21,Photo Feature,2,Referal,1,Relationship,1,SEO,5,Slider,100,Social,1,Social Media,6,Software,3,Study,1,Tech,4,Tourism,2,Travel,2,Uncategorized,10,Videos,6,Yoga,1,
TEEK RC: CSS3 Social Icons with Font Awesome
CSS3 Social Icons with Font Awesome
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy