Troubleshooting for Web

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

Why isn’t my icon 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 available in the version you are loading? - 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, Pro, or Pro+? - Some icons are only available in Font Awesome Pro or 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/Pro+ icons.

If you’re using a subsetted Kit, have you included the icon or style in your subset? - If you have subset your Kit to include only some styles or individual icons, double-check that the icon in the style you are trying to use is included.

If you’re hosting Font Awesome yourself, are your files installed and the paths correct? - 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.

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

Are you referencing the right style prefix? - With Version 7, we have many different Icon Families and Styles. You’ll want to make sure you’re using the right classes for the family and style you want. Also, make sure you’re loading the right assets (via a Kit or when hosting yourself) for the style you want to use to.

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.

For Squarespace, we’ve got some instructions on how to add Font Awesome in Squarespace.

For other similar tools, you can follow the quick start if you have access in your site-building tool to add a link in the head of your pages.

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

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 7 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 7.

Can I use Font Awesome 7 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 can also add modifiers to any of our icons using our Icon Wizard. You’ll need an active Pro plan and a Pro Kit to upload and use custom icons.

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 lets you select auto-subsetting or create your own subset with our Kit Custom Subsetting options. You can also host yourself and only load the styles you are using in your project.

I’m having trouble with my uploaded custom 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, doublecheck 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 Kits.

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

Check out Icon Packs, Families, and Styles to see all of our current visual options.

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.