Font Awesome Icons Web Icons
Interview Questions
All Tutorials
Job SearchWhat are Font Awesome Icons?
Font Awesome icons library includes 519 free scalable vector icons. Font Awesome icons are available on free for both personal and commercial use. These are originally designed for Bootstrap, and can be customized easily.
How to load the font library?
Here’s how to load the Font Awesome library. To load it copy and paste the following line in the <head> section of the webpage.
How to use the icons?
Font Awesome icons create different types of icons. Select one from them and add the name of the icon class to any HTML element within the < body > tag. Below example explains how, we have used the icon of the Indian currency.
Here’s the output:
How to define the size of an icon?
The size of the icon can be increased or decreased by defining its size using CSS and using it along with the class name, as below mentioned. Given example declared the size as 6 em
Here’s the Output:
.png "defining size")
How to define the color?
As mentioned about size, we can define the color of the icons using CSS. Below mentioned example clearly explains how to change the color of the Indian currency icon.
OUTPUT
.png "defining color")
List of Icons Categories
Font Awesome provides 519 icons in the following categories −
- Web Application Icons
- Hand Icons
- Transportation Icons
- Gender Icons
- File Type Icons
- Spinner Icons
- Form Control Icons
- Payment Icons
- Chart Icons
- Currency Icons
- Text editor Icons
- Directional Icons
- Video Player Icons
- Brand Icons
Replacing the class name in the programs with the class name of the desired icon is ready to use.
