You can place Font Awesome icons just about anywhere, and we've tried to make it so that icons will take on the characteristics and blend in with surrounding text naturally.
We’ll cover the basics of how to add icons to your project, shorthand class names for different icons styles, how to add icons to HTML, using icons aliases, and more!
To add an icon, you need to know two bits of information:
- The shorthand class name for the style you want to use
- The icon name, prefixed with
fa- (meaning "Font Awesome" naturally!)
There are six styles of Font Awesome — Each has a unique class name and font-weight. Here are examples:
Add Icons to HTML
We designed Font Awesome for use with inline elements, and we recommend that you stick with a consistent element in your project. We recommend using
<i> element with the Font Awesome CSS classes for the style class for the style of icon you want to use and the icon name class with the
fa- prefix for the icon you want to use. Accessibility-minded folks may want to opt for the
<span> element instead of
Here's an example:
We've updated many of our icon names in Version 6 to make them more universal and consistent. But we wanted to make sure not to break your existing code, so we made aliases for renamed icons to allow them to work with either the old or new names.
And you can use the old or new name for styles as well. So you can still use
fab, and have
fat be the new Thin!
Alternate Ways to Add Icons
We also have many other ways to add Font Awesome icons, in case your situation calls for something specific:
When using Web Fonts
When using SVGs