How To Add And Use Font Awesome Icons In Blogger

By : Zaeem Khaliq

On : 1/28/2014

In : Blogger Tricks, Newbies Guides

0 comments

Have You Ever Think About Icons In Your Mind? Are You Looking For Icons Which Are Used To Beauty Your Blog. These Days, The Graphics Designing Is Growing Day By Day And The Most Important Element Of Graphics Are Icons Which Are Used To Beauty Your Contents. In Blogger Templates Or Themes, There Are Many Icons On Toolbar As You Are Seeing Above, But These Are Images Which You Will Use In Your Post. Some Of The Templates Have Very Low Quality Or Bad Coloured Icons Which Are Not Used To Beauty Your Blog But They Give Your Blog A Bad And Ugly Look, But Some Of Them Are Very High Quality And Colorful Which Can Be Very Useful To Customize Your Blog Posts With Awesomeness. One Of The Proper And Most Professional Icons Which Are Used By Many Web Designers Is "Font Awesome Icons", Which Are Used To Beauty Your Blog Posts. It Is A Simple CSS Technique That Adds Vector Icons That Look Awesome At Any Size. So Below, We Will Describe About Font Awesome Icons And Its Benefits. So Let's Get Started Below:-

What Is Font Awesome?

Well, Font Awesome Is A Brand Which Provides You Thousands Of Beautiful Icons Which You Can Apply On Your Blog For Free. It Gives Iconic Font For Designers To Make Better Designs That Looks Good On Any Size. You Might Have Seen Many Beautiful Icons On Other Websites, But In This We Will Use Font Awesome Icons. In Wordpress And Other Platforms, It Is Common And Is Being Used By Many Users But In Blogger, Few Of Them Are Using These Icons Because They Don't Know How To Use. The Most Important Thing Of These Icons Is That They Are Not Like And Image, But They Can Be Placed Before Or After Your Text By Just Applying A Simple Code For It. This Will Make Your Blog More Fast Instead Of Images That Take So Long To Load A Web Page. They Have A Total Of 369 Icons In Their Site On Different Categories Including Web Application Icons, Form Control Icons, Currency Icons, Text Editor Icons, Directional Icons, Video Player Icons, Brand Icons And Medical Icons. It's Version Is 4.0.3 Which Is Completely Free And Easy To Use.

Benefits

So, I Will Tell You The Benefits Of Font Awesome Icons, There Are No Disadvantages Of It.

• High Quality : Provides A Wide Range Of High Quality Icons.
• Clean Designed : These Are Cleaned Designed Icons.
• Support With CSS : It Is Also Editable With CSS, You Can Change The Properties So That The Colors, Size, Shadows etc Can Easily Be Adjusted.
• Speed : These Icons Are Extremely Lightweight, Which Also Increase The Loading Time Of Your Blog Than Images.
• Innovate : The Team Of Font Awesome Icon Is Working Hardly For Peoples And Are Producing Icons To Make It Even Better For You.
• All Free! : The Most Important Feature Of It Is That All Of The 369 Icons Are Completely Free, No Payments.

Is This Easy To Apply In Blogger?

So This Is The Main Question Which Is Said By Many People That How Can They Apply These Icons And They Are Easy Or Not. I Want To Tell You That The Method Is Extremely Easy Which You Can Apply And Use The Icons In Blogger. If You Know The Basics Of CSS, Then You Can Learn It Very Easily. I Suggest You That It Is Easy To Use Instead Of Icons Which Are Obtained From Images. I Recommend Every Blogger Owner That He Must Use These Icons In His Blog Posts Which Will Bring Beauty To Your Blog Posts. If You Are Designing A Template, Then You Can Also Use These Icons To Look More Professional. These Icons Are Not Made With jQuery Or Javascript Language, But This Is A Simple HTML Language, But We Can Edit With CSS To Customize It With Own Way. You Just Have To Call First The CSS External Plugin In Your Template And Use Easily In Blogger Post Editor With HTML Anywhere. So Let's Start With Few Simple Steps Below:-

How To Use Font Awesome Icons?

So As I Described That The Steps Are Very Simple, You Just Have To Paste The Code First In Your Template, Remember That If You Don't Follow The First Step, Your Icons Will Not Work. So Add It Then Use It Easily!.

Step#1 : Installation

• Go To Blogger.com >> Your Blog >> Template >> Edit HTML.
• Find For <head> Tag.
• After Finding The Above Code, Paste The Following Code Below <head> Tag.

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

• Save Your Template.
• You've Successfully Installed!.

Step#2 : Using Icons In Blogger

• Now The Main Thing Is To Add It In Blog Posts.
• Go To Font Awesome Icons List.
• Click On Any Icon You Want It.
• Now You Will Get A Code Which You Have To Copy It And Paste It In Your Post.
• Now Go To Blogger.com >> Your Blog >> New Post >> HTML Tab
• Now Paste The Code Anywhere You Want.

• See The Example Below

<a href="Your URL"><i class="fa fa-rub"></i>Home</a>

• You Have To Just Code In Between <a> Tags With Calling Icon Class Which Is <i>.
• Now Replace Home Text With Yours. 
• If You Want To Change The Icon, Just Click On Any Other Icon And Then Copy That Code And Replace It With The Highlighted Code Above. Just Remain The First fa As Is It And Replace The Other After The First Code.
• Now It Will Look Like This:-

fa-rub

• You Can See The "P" Before The Text Which Is The Icon, Now Replace fa-rub With Your Text.
• You Can Also Apply The Link In It By Using The Following Code Below:-

<a href="http://bloggingtutorials2.blogspot.com/"><i class="fa fa-rub"></i>Blogging Tutorials</a>

• Replace My Blog Link With Your Blog Link And Text With Yours. 

Step#3 : Customizing Icons With CSS

• Now In Some Cases, You Want To Customize The Icons According To Your Choice.
• This Is Possible To Edit, This Is A Simple Step In Which We Will Customize It Using CSS.
• Just Call <i> tag in CSS And Customize It With Your Way.
• See The Example Below:-

.fa fa-rub {
font-size:15px;
font-weight:lighter;
color:black;
float:left;
}

• You Can See The .fa fa-rub Class In CSS, You Just Have To Put A Dot Before The Icon Code.
• Now Customize It As You Want.
• CONGRATULATIONS! You've Done It!.

Watch Video Tutorial

Watch In Full HD

How To Add And Use Font Awesome In Blogger

Final Words!

So Friends, That's All About The Icons Which Can Be Used To Beauty Your Blog. I Hope You Will Get A Lot Of Help In This Tutorial. But Don't Forget To Apply First Step Otherwise Your Icon Will Not Display. There Are Tons Of Icons Which Can Be Used So Use It Wisely!. I Think This Is Not So Difficult Task To Add, But If You Have Not Understand It All, You Can Ask In Comments, I Will Help You. Share Your Thoughts With Us, Also Share This Post On Social Networks. Have A Nice Day And Happy Blogging By Icons!.