Font Awesome Icons - Web Icons

What 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:

using the icon

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:

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.


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.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Web Icons Topics