Having trouble getting something working on the Web? Here are some common snags and how to get yourself out of trouble.
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.
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.
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
This is the one that gets us a lot. Make sure you didn't fat-finger the name of the icons when adding icons.
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.
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.
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 (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.
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.
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.
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 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.
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
If neither of those helps you, we've got a special section for troubleshooting Icon Uploads that might help with your specific issue.
Sounds like double trouble! We've got a special set of troubleshooting for Duotone icons.
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.
Make sure your system's settings are not preventing the animations. You can check it or change it in user preferences (opens new window).
Let us know! Give us feedback. We're listening - and want to make Font Awesome as awesome as possible.