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 (for version 4.3.x):
- It has 605+ icons to choose from.
- No JavaScript required to set it up.
- It is scalable and looks good at any resolution. Its based on vector graphics.
- You have CSS control over the icons, which means that you can change its color, size, CSS effects and everything possible through CSS.
- They look good on Retina Devices too as they are vector.
- Works with all CSS frameworks and has no dependency on any CSS or JavaScript framework.
- Doesn’t cause trouble with screen readers.
- Has some basic animations like ‘spin’ inbuilt.
- 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:
/* CDN hosted version */
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
/* Self hosted version */
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">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:
<!-- This would generate a calendar Icon -->
<i class="fa fa-calendar"></i>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 https://fontawesome.com/v5.15/icons?d=gallery&p=2
Here are few examples of Fontawesome Icons:
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.