Font Awesome is an icon set that contains different scalable vector icons. There are many different types of icons that come with Font Awesome: social media, UI/web-related, and more!
Font Awesome gives us flexible vector icons that we can be customized according to our requirement. We can change its size, color, drop shadow and other properties for example,This library is completely free either for personal or commercial use. Earlier font awesome was designed only for bootstrap but now you can use it in any of your frameworks. You just need to download font awesome on your machine and need to include its CSS file in your project.This is the file structure of font awesome|— font-awesome/ :
| |— fonts/
| |— FontAwesome.otf
| |— font-awesome-webfont.eot
| |— font-awesome-webfont.svg
| |— font-awesome-webfont.ttf
| |— font-awesome-webfont.woff
| |— css/
| |— font-awesome.cssFont awesome CSS file will be included in the normal way like other CSS files.
<link rel=”stylesheet” href=”/css/font-awesome.css”>
All inbuilt fonts are included in “font-awesome.css” you don’t need to include font files separately. Just place “font” folder in the same directory where “css” folder is.
How to use Font awesome icons in html:
You can use it simply anywhere in the html page (Font awesome prefers <i> tag and <span> tag) with prefix fa class and the icon’s name. It also provides different classes of icon sizes:
For Example:
<i class="fa fa-car fa-lg"></i> <i class="fa fa-car fa-2x"></i> <i class="fa fa-car fa-3x"></i> <i class="fa fa-car fa-4x"></i> <i class="fa fa-car fa-5x"></i>
These are some Advantages of Font Awesome icons:
1. Reduce graphics work in your project because you don’t need to create these icons using graphic design.
2. Font awesome supports all modern browsers (even back to IE6).
3. Great performance loading time because of their small size and all the icons are included in one font file, so it only takes a single HTTP request to load these icons.
4. Developer s love the use of these icons as fonts because of the extensibility of styling available.
5. These icons offer more features like rotate, scale, and pull. Also, there are some animation options available.