Having trouble getting something working? Got a question that the rest of our docs can't answer? Here are some answers to commonly asked questions and troublesome spots. We've got help for the desktop as well.
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:
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 (and if you're using the Font Awesome 6 alpha, you are using this method!), 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>.
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.
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:
<i class="fa-solid fa-camera"></i>
<!-- fa-solid for solid style -->
<i class="fa-regular fa-camera"></i>
<!-- fa-regular for regular style -->
<i class="fa-light fa-camera"></i>
<!-- fa-light for light style -->
<i class="fa-duotone fa-camera"></i>
<!-- fa-duotone for duotone style -->
<i class="fa-thin fa-camera"></i>
<!-- fa-thin for thin style -->
<i class="fa-brands fa-twitter"></i>
<!-- fa-brands for brands style -->
For WordPress, we have an official plugin in beta 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.
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.
For Font Awesome 6 Alpha, we recommend that you only use the styles of Font Awesome icons you need and not load all of our assets. If you're using Font Awesome 5, you can use a Kit which auto-subsets down to just the icons you use or you can create your own subset with our Desktop Subsetter. Kits and our Desktop Subsetter will support Font Awesome 6 once it is officially released.
Let us know! Give us feedback on this alpha. We're listening - and want to make this alpha, and Font Awesome 6 official release, as awesome as possible.