What is Font Awesome?

Font Awesome is basically an Icon-Font Kit. It is a font that renders icons and is somewhat similar (though not exactly) to the windings in windows. It gives you scalable vector icons that you can customize as per your choice like changing the color, size, drop shadow and other CSS3 effects etc.

Why use font awesome ?

Well, mainly because of the ease of use and the flexibility it gives you. As said in their own words:

  1. It has 605 icons to choose from.
  2. No JavaScript required to set it up.
  3. It is scalable and looks good at any resolution. Its based on vector graphics.
  4. You have CSS control over the icons, which means that you can change its color, size, CSS effects and everything possible through CSS.
  5. They look good on Retina Devices too as they are vector.
  6. Works with all CSS frameworks and has no dependency on any CSS or JavaScript framework.
  7. Doesn’t cause trouble with screen readers.
  8. Has some basic animations like ‘spin’ inbuilt.
  9. And yes, it is Free for commercial use !

Getting started with Font Awesome

Using Font Awesome on your web page is a very simple process. Firstly, you need to include reference to the CSS file. You can  do that by either linking to their CDN hosted version or by downloading the font and including it on your web page.

Step 1:

Once you are done including the font awesome CSS file on your page, you are ready to get started. Now you can place font awesome fonts wherever you want using the <i> tag.

Step 2:

Please note that you need to use the supporting class “fa” along with your preferred icon. Which means that if you want to use a recycle icon you’ll have to use “fa  fa-recycle” and not just the “fa-recycle” class. For a complete list of the icons available please visit http://fortawesome.github.io/Font-Awesome/icons/

Here are few examples of Fontawesome Icons:


[codepen_embed height=”268″ theme_id=”20710″ slug_hash=”qOyOLz” default_tab=”result” user=”moreonfew”]See the Pen Fontawesome Example by MoreOnFew (@moreonfew) on CodePen.[/codepen_embed]


To spin a fontawesome icon use fa-spin class along with the icon’s other classes. This class is really helpful when you would like to show a loading icon or a refresh icon.

You can also use font awesome icons along with Bootstrap or any other CSS Frameworks too. Also if you have a request for an Icon that doesn’t exist in the existing set of fontawesome Icons, you can request for the same. Here’s how you can request for a new Font awesome icon.

So go ahead and try it out. Do let us know your thoughts or experiences about Font Awesome.

Related Posts

  • How to use Glyphicons in bootstrap? Like many other useful components, Bootstrap also provides a lot of easy to use Glyphicon "icons". Well in simple terms these contain a list of useful font icons that […]
  • How to use Google web fonts ? Over the time if you notice, the web is becoming more beautiful and pleasant. People have actually become more serious about UX, UI, Typography and the related […]
  • Unsemantic CSS framework tutorial What is Unsemantic? Unsemantic is a CSS framework that is responsive and based on fluid grid system that uses percentages instead of fixed pixels.  Like any other CSS […]
  • How to implement Cufon fonts ? The web is getting creative and beautiful. You can find  a variety of new font's being used across the web making the site look beautiful and creative. There are […]
  • Conditional Comments in HTML Many of us would have come across scenarios where we wanted a different Stylesheet or CSS properties for IE (Internet Explorer). While many would have resorted to […]
  • Make CSS first-child work With the onset of CSS3 a lot of new selectors were introduced. Many of these new selectors have been of a lot of help to us. The first-child selector is one such […]