Having trouble getting something working on the Web? Here are some common snags and how to get yourself out of trouble.

Advertisement

Looking for help with Font Awesome on the Desktop?

You can find tips and support for desktop issues in Troubleshooting on the Desktop.

The icon I want to use is missing or isn't showing up?

We hate it when that happens (yes, it probably happens to us even more). The first thing to do is to double-check a few things:

Is the icon you're trying to use available in the version of Font Awesome you are using on your project?

We release icons pretty frequently these days. Make sure you're using the latest and greatest. You can check with version an icon was added to on its detail page.

Are you using Font Awesome Free or Pro?

Some icons are only available in Font Awesome Pro. Double-check that the icon you want is in the version of Font Awesome you're referencing and using. Also, make sure you are using and referencing the right style prefix and supporting files to use Pro icons.

Hosting Font Awesome Yourself

If you're hosting your own copy of Font Awesome, check that you've moved all of the files you need to use the icon you want. Also, double-check the paths to those files in your HTML's <head>.

Did you type the correct name or prefix of the icon?

This is the one that gets us a lot. Make sure you didn't fat-finger the name of the icons when adding icons.

Is your web site loading multiple, conflicting versions of Font Awesome?

This is a common problem when using a CMS like WordPress or frameworks like Jekyll that let you add themes or plugins that may include their own versions of Font Awesome. Or when you've forgotten to remove an old version of Font Awesome you set up a long time ago. Your web site should be loading just the one version of Font Awesome that you intend to set up. Otherwise, there may be chaos that these other troubleshooting tips could never fix.

If you're using a Kit, try enabling the Conflict Detection option in the settings for your Kit to spot any problems like this. If your site is loading multiple conflicting versions, then you should solve that problem first. Your web site should be loading just the one version of Font Awesome that you intend to set up. Otherwise, there may be chaos that these other troubleshooting tips could never fix.

Advertisement

The icon I want to use is showing up, but in the wrong style.

Are you referencing the right style prefix? - With version 6, we have a solid, regular, light, duotone, and thin styles of every icon in Font Awesome. We also separated out brand icons into their own style/category for easier use. Here are the different style prefixes in action:

<!-- fa-solid or fas for solid style -->
<i class="fa-solid fa-camera"></i>

<!-- fa-regular or far for regular style -->
<i class="fa-regular fa-camera"></i>

<!-- fa-light or fal for light style -->
<i class="fa-light fa-camera"></i>

<!-- fa-duotone or fad for duotone style -->
<i class="fa-duotone fa-camera"></i>

<!-- fa-thin or fat for thin style -->
<i class="fa-thin fa-camera"></i>

<!-- fa-brands or fab for brands style -->
<i class="fa-brands fa-twitter"></i>

I use a CMS or web publishing tool like WordPress, Squarespace, or Wix. How do I use Font Awesome in my site?

For WordPress, we have an official plugin (opens new window) which supports Font Awesome 5. A version of the plugin that supports Font Awesome 6 is in the works.

For the others, while we'll be drafting some more instructions and possibly future tools to help more specifically, right now your best bet is to follow the quick start, if you have access in your site-building tool. But you'll need to be fairly familiar with HTML.

My site uses a theme with Font Awesome in it. How can I use Font Awesome Version 6?

Our hosted Font Awesome kits may be able to help with this. There is a built in conflict detection option in kit settings that can help identify the versions being loaded. If the theme uses Font Awesome 4, kits also have a feature to enable Version 4 compatibility right out of the box, err, kit. When the Version 4 Compatibility feature is enabled, this feature will help resolve any conflicts with older versions of Font Awesome your project may still be loading.

If you are hosting Font Awesome 6 yourself or not using a kit and there's no way to override the Font Awesome assets used in the theme, you'll need to contact the theme developer/designer and ask them to upgrade the theme to use Font Awesome 6.

Advertisement

Can I use Font Awesome 6 and older versions together?

No, we do not recommend this as many of the CSS class names, icon unicode values, and supporting styling have a lot of overlap. Lots of collisions would happen and we can't promise icons will render as you or we expect in this case. Plus, loading so many icons and assets would be no bueno for performance of your site or app.

Can I add my own or custom icons to Font Awesome?

You sure can! We now have the Kit Icon Upload feature that lets you upload and serve other icons right alongside - and with all the same magic - as the Font Awesome icons. You'll need a active Pro plan and a Pro kit to upload and use the icons.

Or if you're looking for more comprehensive asset management for your project, perhaps our very own Fort Awesome (opens new window) might be more what you need?

The file sizes for Font Awesome are too big for my project. What can I do?

The easiest option is to use a Kit which auto-subsets down to just the icons you use. Or you can create your own subset with our Desktop Subsetter (Version 6 support coming soon!) or host yourself and only load the styles you are using in your project.

I'm having trouble with my uploaded icons!

If you're having trouble getting your icon uploaded, make sure you check the icon preparation recommendations.

If you have the icon uploaded, but it won't load in your project, doublechek that your project is referencing the right kit, and make sure you're using the fak style and not one of the official Font Awesome styles (like fas or far).

If neither of those helps you, we've got a special section for troubleshooting Icon Uploads that might help with your specific issue.

Advertisement

Why aren't my Duotone icons working?

Sounds like double trouble! We've got a special set of troubleshooting for Duotone icons.

Is there somewhere I can see all the style options that Font Awesome offers?

With Version 6, we've added a lot of new styles AND styling options. If you want to see the different icon styles we have, check out the Styles of Font Awesome.

If you want to see all the out-of-the-box options for styling icons, you can check out Styling Options.

And if you are looking for a quick reference for all the CSS custom properties we have enabled, check out the Style CheatSheet.

Why are my animated icons not animating?

Make sure your system's settings are not preventing the animations. You can check it or change it in user preferences (opens new window).

My question or issue wasn't answered by this information. What can I do?

Let us know! Give us feedback on this beta. We're listening - and want to make this beta, and Font Awesome 6 official release, as awesome as possible.

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!