How To Add Icons

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!

Mục lục bài viết

Before You Get Started

Make sure you’ve:

Set up Font Awesome in your project and know where you parked your tardis.

Basics

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
Optional

Families + Styles

There are three families of Font Awesome icons – each with a unique look, class name, and @font-face font-family. In both Font Awesome Classic and Sharp, there are five styles of Font Awesome icons. Here are some examples:

Classic Family

Sharp Family

Style Availability Style class font-weight Looks like Solid Pro only fa-sharp fa-solid 900 Regular Pro only fa-sharp fa-regular 400 Light Coming Soon! Thin Coming Soon! Duotone Coming Soon!

Brands Family

Style Availability Style class font-weight Looks like Brands Free Plan fa-brands 400

Kit Custom Icons (from a downloaded Kit)

Style Availability Style class font-weight Kit Custom Icons Pro only fa-kit 400

Font Awesome Classic is Our Default Family

If you don’t specify a family class name, our styling toolkit will render icons in Font Awesome Classic, the original look and feel that’s always in style. But if you need to reference the Classic family, you can just add the fa-classic in your icon’s HTML class names. If you want to change any or all icons to use Sharp, just add fa-sharp in the same manner!

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 <i>.

Here’s an example:

 
<
i class
=
"
fa-solid fa-user"
>
</
i>

 
<
span class
=
"
fa-solid fa-user"
>
</
span>

Setting Different Families + Styles

And here’s an example that references different styles and families of icons:

 
<
i class
=
"
fa-solid fa-user"
>
</
i>
<
i class
=
"
fa-regular fa-user"
>
</
i>
<
i class
=
"
fa-light fa-user"
>
</
i>
<
i class
=
"
fa-thin fa-user"
>
</
i>
<
i class
=
"
fa-duotone fa-user"
>
</
i>

 
<
i class
=
"
fa-brands fa-font-awesome"
>
</
i>

 
<
i class
=
"
fa-sharp fa-solid fa-user"
>
</
i>

 
<
i class
=
"
fa-sharp fa-regular fa-user"
>
</
i>

Stay on target with those CSS rules!

When using our SVG framework, remember that DOM elements with Font Awesome classes are replaced with injected <svg> elements by default. Be sure that your CSS rules target the right element.

Aliases

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 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).

 
<
i class
=
"
fa-solid fa-cutlery"
>
</
i>
<
i class
=
"
fa-solid fa-utensils"
>
</
i>
<
i class
=
"
fas fa-utensils"
>
</
i>

 
  
<
i class
=
"
fa-sharp fa-solid fa-times"
>
</
i>
  
<
i class
=
"
fa-sharp fa-solid fa-close"
>
</
i>
  
<
i class
=
"
fass fa-xmark"
>
</
i>