Font Awesome 5 Icons

How To Add Icons

To insert an icon, add the name of the icon class to any inline HTML element.

The  and  elements are widely used to add icons.

All the icons in the icon libraries below are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)

To use the Free Font Awesome 5 icons, go to fontawesome.com and sign in to get a code to use in your web pages.

Note: No downloading or installation is required!

Font Awesome 5 has a PRO edition with 7842 icons, and a FREE edition with 1588 icons. This tutorial will concentrate on the FREE edition.

To use the Free Font Awesome 5 icons, you can choose to download the Font Awesome library, or you can sign up for an account at Font Awesome, and get a code (called KIT CODE) to use when you add Font Awesome to your web page.

Prefer the KIT CODE approach. Once you get the code you can start using Font Awesome on your web pages by including only one line of HTML code:

Sizing Icons

The fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, or fa-10x classes are used to adjust the icon sizes relative to their container.

List Icons

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

Animated Icons

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

Rotated and Flipped Icons

The fa-rotate-* and fa-flip-* classes are used to rotate and flip icons.

Stacked Icons

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x class for the regularly sized icon, and fa-stack-2x for the larger icon.

The fa-inverse class can be used as an alternative icon color. You can also add larger icon classes to the parent to further control the sizing.

Fixed Width Icons

Just like letters and other characters, icons can have different widths, and if you need to vertically align icons like in a list or a menu, this can be a problem.

The fa-fw class is used to set icons at a fixed width.

Bordered and Pulled Icons

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