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 icon styles, how to add icons to HTML, using icons aliases, and more!
To add an icon, you need to know a few bits of information:
The shorthand class name for the style you want to use
The icon name, prefixed with fa- (meaning “Font Awesome” naturally!)
The shorthand class name for the family you want to use (the default is the Classic family if you don’t include a family class)
So to add an icon to your HTML, you just add an element with that classes to your page. Here’s an example:
<iclass="fa-sharp fa-solid fa-user"></i>
<!--
In the example above, you add...
1. `fa-solid` class for Solid style
2. `user` icon with the `fa-` prefix
3. `fa-sharp` class for Sharp family
... and you'll see the Sharp Solid User icon
-->
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 and you’ll add CSS classes for the for the Font Awesome family and style of icon you want to use and the icon name class with the fa- prefix for the icon you want to use.
If you want to avoid using the i tag, you can use a <span> element instead of <i>. Here’s that same example using a span tag:
<!-- You can use a <span> element, with classes applied in the same way -->
Font Awesome contains many icon packs each with its own visual look and collection of families and styles. Below you’ll find all our families and styles listed with the classes and other info you need to add icons to your projects.
Since Version 6, we’ve updated many of our icon names to make them more universal and consistent. But if you’re a Version 5 or earlier user, 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 fas, far, fal, fad, and fab. And we’ve also included older prefix versions for our new Thin style (fat) and new Sharp family of styles (Sharp Solid is fass while Sharp Regular is fasr).
<!-- All of these code snippets will render the same Solid icon thanks to aliases. -->
<iclass="fa-solid fa-cutlery"></i>
<iclass="fa-solid fa-utensils"></i>
<iclass="fas fa-utensils"></i>
<!-- All of these code snippets will render the same Sharp Solid icon thanks to aliases. -->
