Before diving into Font awesome first we need to know what is icon fonts
What is icon fonts
- Set of symbols and glyphs
- Can be used just like regular fonts
- Can be styled with CSS just like regular fonts
- Popular lightweight replacement for simple graphics on the website
Font Awesome is a web font used instead of conventional old image icons by website designers & developers for icons.
It’s customizable in terms of shading, scaling & stacking using plain css on top of other background types.
You can use it by referencing your website’s css files and holding the font folder that comes with it in addition to the FontAwesome css file.
By using the prefix fa and the name of the symbol, you place Font Awesome icons.
Remember to include the CSS files and font files into your project.
Font Awesome is designed to be used for elements that are inline. For icons, the i and <span> elements are commonly used.
Notice also that if you alter the font size or color of the container icon, the icon will change. The same goes for shadow things, and everything else that uses CSS is inherited.
The fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes are used to increase the icon sizes relative to their container.
The fa-ul and fa-li classes are used to replace default bullets in unordered lists.
Bordered and Pulled Icons
The fa-border, fa-pull-right or fa-pull-left classes are used for for pull quotes or article icons.
The fa-spin class gets any icon to rotate, and the fa-pulse class gets any icon to rotate with 8 steps.
Using the fa-stack class on the parent, the fa-stack-1x class on the regularly-sized icon, and fa-stack-2x on the larger icon to stack multiple icons.
As an alternate icon color, the fa-inverse class may be used. You may also add larger parent icon classes to further monitor the scale of the icon.
By using Font awesome you can make your website more interesting, readable, and good looking.