How to add font awesome

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.

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.

And of course Pro-level plans come with…

All 16,150 Icons in Font Awesome

Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands

A Perpetual License to Use Pro

Services and Tools to Make Easy Work of Using Icons

Fresh Icons, Features, and Software Updates

Plus Support From Real Humans

Already have a Pro Plan? Sign in

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!

Before You Get Started

Make sure you’ve:

To add an icon, you need to know two bits of information:

There are six styles of Font Awesome — Each has a unique class name and font-weight. Here are examples:

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.

And of course Pro-level plans come with…

All 16,150 Icons in Font Awesome

Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands

A Perpetual License to Use Pro

Services and Tools to Make Easy Work of Using Icons

Fresh Icons, Features, and Software Updates

Plus Support From Real Humans

Already have a Pro Plan? Sign in

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 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 element instead of .

Here’s an example:

Stay on target with those CSS rules!

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

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.

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.

And of course Pro-level plans come with…

All 16,150 Icons in Font Awesome

Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands

A Perpetual License to Use Pro

Services and Tools to Make Easy Work of Using Icons

Fresh Icons, Features, and Software Updates

Plus Support From Real Humans

Already have a Pro Plan? Sign in

Alternate Ways to Add Icons

We also have many other ways to add Font Awesome icons, in case your situation calls for something specific:

Install Manually

This documentation describes customizing WordPress by adding PHP code to your theme’s functions.php file. It’s intended to be used by more advanced WordPress users who know why using our plugin isn’t the best solution for their situation.

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.

And of course Pro-level plans come with…

All 16,150 Icons in Font Awesome

Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands

A Perpetual License to Use Pro

Services and Tools to Make Easy Work of Using Icons

Fresh Icons, Features, and Software Updates

Plus Support From Real Humans

Already have a Pro Plan? Sign in

If you’re just trying to setup Font Awesome in WordPress the simplest way, with all the magic already built-in, then use our WordPress plugin instead.

Before You Get Started

In order to make use of these code snippets, you need to be able to check off all of these boxes:

Font Awesome 6 Pro is not available on the Font Awesome CDN!

Font Awesome 6’s Free icons are available via the Font Awesome CDN with SVG or Webfont frameworks, however you’ll need to set up and use a Kit to access Pro Icons. If you’d still prefer to use the Pro icons via the CDN, Font Awesome 5 still supports that.

These examples and code snippets offer two different approaches to setting up Font Awesome in WordPress: with kits and without kits. The «without kits» approach is referred to as «CDN» in these examples mainly for legacy reasons. Namely, before we had kits, the options were either to host the icon assets yourself (self-hosting), or load them from our CDN. Then we added kits, which are also backed by a CDN.

So don’t think that the kits approach in these examples is sans-CDN. Kits are backed by a fast and stable CDN.

In fact, kits are usually the best approach you can take for both performance and flexibility. Once you’ve set up a kit with one of these code snippets, you’ll be able to configure and re-configure that kit right from your Font Awesome kit settings and not have to touch the PHP code again. And kits are a sway to have Font Awesome 6 Pro icons hosted for you.

The «CDN» alternatives are offered because, sometimes, there are use cases where loading the Font Awesome assets directly from the CDN is preferable to loading a kit. But if you aren’t sure that you have such a use case on your hands, then that’s a pretty good clue that setting up a kit is your best bet.

Use Font Awesome on the Web

Get set up, add icons and style, or fine-tune – we’ve got what you need to know to use Font Awesome icons on the web.

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.

And of course Pro-level plans come with…

All 16,150 Icons in Font Awesome

Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands

A Perpetual License to Use Pro

Services and Tools to Make Easy Work of Using Icons

Fresh Icons, Features, and Software Updates

Plus Support From Real Humans

Already have a Pro Plan? Sign in

Setting Up on the Web

There are a few different ways to set up Font Awesome. We suggest using a kit since it’s easy, fast, and customizable.

Use a Kit

Like a CDN just for you! Adjust the settings, get auto-subsetting, upload your own icons, and lots more goodies.

In a Hurry? Try Our Quick Start.

Create a kit, add some icons, sprinkle in some style, and you’re off and running!

Host Yourself

Take the wheel and drive how you want when you host yourself.

Upgrade from Earlier Versions of Font Awesome

Are you a Font Awesome OG using Version 5, or even 4? You can easily upgrade to Version 6.

Use Font Awesome npm Packages

Get all the awesome packed up to-go in our npm packages.

Add Font Awesome Icons to Your Project

Get Started

Need to get icons in your web project quickly? Here’s the fastest and easiest way to use Font Awesome in your web-based projects (keep in mind you can use Font Awesome in lots of other ways, including on the desktop).

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.

And of course Pro-level plans come with…

All 16,150 Icons in Font Awesome

Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands

A Perpetual License to Use Pro

Services and Tools to Make Easy Work of Using Icons

Fresh Icons, Features, and Software Updates

Plus Support From Real Humans

Already have a Pro Plan? Sign in

We’ll cover the basics of setting up Font Awesome and finding that perfect icon for your project.

Upgrading from a previous version of Font Awesome?

We’ve tried to make moving to Version 6 as easy as possible. Get the deets on upgrading and enjoy the latest and greatest with ease.

Font Awesome Kits are the easiest way to get Font Awesome icons into your projects. Just create a new Font Awesome Kit and add the Kit code to the head of each template or page of your project where you want to add icons.

Browse the thousands of icons in v6 to find some icons you like and then add the icon name and style as CSS classes to an HTML tag.

Get Started

Need to get icons in your web project quickly? Here’s the fastest and easiest way to use Font Awesome in your web-based projects (keep in mind you can use Font Awesome in lots of other ways, including on the desktop).

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.

And of course Pro-level plans come with…

All 7,864 Icons in Font Awesome

Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands

A Perpetual License to Use Pro

Services and Tools to Make Easy Work of Using Icons

Fresh Icons, Features, and Software Updates

Plus Support From Real Humans

Already have a Pro Plan? Sign in

We’ll cover the basics of setting up Font Awesome and finding that perfect icon for your project.

Upgrading from Font Awesome 4?

We’ve tried to make upgrading as easy as possible. Get the deets on upgrading and enjoy the Font Awesome 5 with ease.

Setup Font Awesome in Your Project

Font Awesome Kits are the easiest way to get Font Awesome icons into your projects. Just create a new Font Awesome Kit and add the Kit code to the head of each template or page of your project where you want to add icons.

Find and Add Icons

Browse the thousands of icons in Font Awesome 5 to find some icons you like and then add the icon name and style as CSS classes to an HTML tag.

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.

And of course Pro-level plans come with…

All 7,864 Icons in Font Awesome

Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands

A Perpetual License to Use Pro

Services and Tools to Make Easy Work of Using Icons

Fresh Icons, Features, and Software Updates

Plus Support From Real Humans

Already have a Pro Plan? Sign in

Make It Awesome

Now you’re ready to Rock and Roll! Take it to 11 by adding some style.