Forget image icons here is Font-Awesome

Hello friends. today I am gonna tell you about the thing will will change the way you design the web pages. Till now you might have been worried of the image icons and the libraries like Silk Icons. So guys forget image icons, here is Font-Awesome.

Till now you have been using any image type icon library; but now with font awesome your icons clutter is totally reduced. AS it is totally CSS and Font based; there are very minor issues with the compatibility.SO start using it. It will save you from either the sprite images of CSS or the image loading of each icon.

So lets see how it works. Lets make it easy and use it from CDN. Here is the html to include the Font-awesome:

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

Now to use the icon you will only need to create a tag . Now in this tag you need to include a class fa. Now you can include any of the fs icon class to create the icons. like to create the icon of the user along with fa you need to include fa-user class. So now the html will look like

<i class="fa fa-user"></i>

This above html will show the following icon with a basic font-size of its parent element defining the font-size. Large preview of the created icon is shown below:

Now if you wanna increase the size of the icon; you can add another class fa-2x; and this class can range upto fa-5x. And above shown image is the fa-5x size of the icon.

Now as a practical part if you wanna use the icon with a button; following will be the code:

<button type="button"><i class="fa fa-heart"></i> Like</button>

OR

<a href="#"><i class="fa fa-comment"></i> Comment</a>

Moreover if you wannasee all the icons, go through this lnk: http://fontawesome.io/icons/

And if you wanna see the good handy trickswith these icons like the animated spinning icons, encircled and en-squared icon, flipped icons go through this link: http://fontawesome.io/examples/.

And yes; the font-awesome shown above is Version 4.0.3 and it does not work in IE equal or less that 7 i.e <= IE7. So if you wanna target your IE7 users without asking them to upgrade their browser; you will be needed to fall down in font-awesome version 3.2.1 and you might lack with certain icons like some social icons.