What Is Font Awesome?

December 22, 2020

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

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.

font-awesome-example

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.

Larger icons

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.

change-icon-size

List icons

The fa-ul and fa-li classes are used to replace default bullets in unordered lists.

list-icon

Bordered and Pulled Icons

The fa-border, fa-pull-right or fa-pull-left classes are used for for pull quotes or article icons.

Animated icons

The fa-spin class gets any icon to rotate, and the fa-pulse class gets any icon to rotate with 8 steps.

Stacked icons

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.

stacked-icon

By using Font awesome you can make your website more interesting, readable, and good looking.