Font Awesome is a awesome font that saves you from thinking about how and from where you will get those awesome Icons for you blog or website. This post is about getting Icons on page using Font Awesome fonts only and without any images.
Previously I have written post about working with Font Awesome without bootstrap. But is working but I do not remember why I used that when we can get that working so easily! Possibly I want to use Font Awesome on any HTML Element instead of
<i></i>! Anyway, knowing alternative way is good.
[If you are new to Font Awesome, then download Font Awesome code
to make the following code work for you. After that just put "font-awesome.css" or "font-awesome.min.css" in your project folder with all fonts provided in /fonts/ folder. Open font-awesome.css file and change the path for fonts "fonts/fontawesome-webfont.eot?v=4.0.3", if you placed css and fonts in different places. There are four fonts file mentioned in CSS file. ]
Anyway here is a new and easier code to for using Font Awesome. I see with Font Awesome 4, everything is just simple.
<i class="fa fa-facebook-square fa-2x"></i>
<span class="fa fa-google-plus-square fa-2x"></span>
So, just add css class
.fa to any element, then add icon class
.fa-facebook-square. This will give you facebook square icon of the size of current font size on your document. If you want bigger icons then you can add any one of these classes:
.fa-lg, .fa-2x, .fa-3x, .fa-4x, or .fa-5x
.fa-lg will give you 33% bigger icon then the font-size applied on that element (i or span) by your style. If you want even bigger icons then .fa-2x etc are there.
There are few more classes in font-awesome.css file to help you control the icons. Example classes are fa-spin (spin icons), fa-fw (fixed width), fa-ul and fa-li to use icons with ul and li, fa-rotate-* (fa-rotate-90) and fa-flip-* (fa-flip-horizontal).
You can even stack two icons to get special effects. Like twitter icon inside square box!
Remember, CDN is available for Font Awesome. If you do not want to download Font Awesome or you do not want to server Font Awesome from your own web server then you have choice. Just include the below CSS and you are ready to use Font Awesome.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">