Help and Troubleshooting
Having trouble getting something working on the Web? Here are some common snags and how to get yourself out of trouble.
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.
Are you using a Sharp icon?
You’ll need a Pro license and to be using Font Awesome v6.2.0 or greater in order to use our Sharp icons.
If you are using a Kit, check the Kit’s settings are showing you are using the “Latest 6.x” version.
If you are using an npm package, verify that your package.json file shows you are using an icon package from Font Awesome v6.2.0 or greater.
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-sharp or fass for sharp solid style --><i class="fa-sharp fa-solid 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 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.
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 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.
Why aren’t my Duotone icons working?
Sounds like double trouble! We’ve got a special set of troubleshooting for Duotone icons.
Why isn’t my kit working on my project?
Hmmm. Make sure you’ve copied your Kit’s unique Kit embed code correctly. Also make sure you aren’t using Subresource Integrity (SRI) or Content Security Policy (CSP). These advanced security features are not compatible with our Kits product.
Why isn’t Pro CDN working on my project?
Hmmm. Double-check that you’ve added the domain you’re trying to use the Pro CDN on and that if you need it, you’ve included "www." as part of it. Lastly, make sure that your Font Awesome Pro subscription, which grants your access to all of our services, is active.
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.
I started using Sharp Thin’s .fast CSS class and now my site’s typefaces are broken and animations are not working
Older versions of animate.css also used the fast CSS class selector to control the speed of animations.
Since Font Awesome also uses this class selector, they conflict with each other.
You can fix this by upgrading animate.css to a new version or you can add this exception into your CSS somewhere to work around the issues.
.animated.fast { font-family: inherit;}My question or issue wasn’t answered by this information. What can I do?
Let us know! Give us feedback. We’re listening - and want to make Font Awesome as awesome as possible.