Monday, March 23, 2015

Implement Font Awesome Icons on Your Blog - Guide
Today, Font Awesome are being the most popular icons. Most of the blog and even popular blogs used it and are using them in present. Font Awesome Icons are developed by Dave Gandy. This Icons are smooth and are compatible with most of the browsers. Even We are also using it on our blog. You can see them in around the Facebook, Google+ and Twitter Icons in side of search box. These icons have smooth layout and are easy to implement. So, Today, I am telling you that how to implement font awesome icons on your blog and how to use it. Well, These are icons are available to use for free. You just want to add two small codes to put an icon on your blog.

Your Luck in Good: Your luck is Good that you are here and now implementing Font Awesome Icons because they recently released 4.3.0 that have more icons than previous one.

Installing Font Awesome in Your Blog's Template

Their are several bootstrap links which are available to install these icons. But here, I am providing the original one. Just follow these easy steps are you will able to use and put these icons on your blog!
  • Go to Blogger Dashboard > Template > Edit HTML
  • Now, Search for following code:
<head>

  • Bellow It, Paste following piece of code.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
  • Click on Save Template and You Are Done in Installing.

Putting an Icon 

 Now, After Putting that script on your template, The script will load all font icons. But whenever you want to show or put any icon in your post or on your template, just put following script:
<i class='fa fa-[ICON_CODE]'/>
Are you thinking that what will you put in place of ICON CODE in other code? You can use font awesome cheat sheet provided by Dave Gandy. The cheat sheet is Here.

In that cheat sheet, all icon's code are provided. You just need to replace that icon codes with ICON_CODE.

Like If you want to display home icon somewhere, You can use below code:

<i class='fa fa-home'></i>

This will display home icon.

How to change the color of the icon?

Yes! You can change the color of any of their icons by using simple font color code. Like if you want to change the color of home icon to blue, use following code:

<font color='Blue'><i class='fa fa-home'/></font>

This will change the color of the icon.
Tip: You can change the size of the icon by using font size code.

From the Editor's Desk

I hope, you will easily implement font awesome icons on your blog and using it. If you need further help or have questions or concerns, just put your words on comment box which is present bellow. We will reach you within 24 hours and reply you with your solution! You can also give your reviews about our new blogger template and suggest some edits to us. Thank You!