Troubleshooting

Having trouble getting something working? Got a question that the rest of our docs can’t answer? Maybe we can help with some answers to commonly asked questions and troublesome spots.

The icon I want to use is missing or not 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 by updating your CDN code reference, updating your Font Awesome package via npm, or downloading a fresh copy of Font Awesome. You can check with version an icon was added to on its detail page (e.g. question-circle was added in Verion 1 but last updated in 5.0.0). If you’re still using Font Awesome 4, you’ll need to upgrade to the latest version to use many icons.
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’ve decided to host 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 icon when referencing it.
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. Try using Conflict Detection 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.

Okay, let’s check a few things:

Are you referencing the right style prefix? - In Version 5, we introduced solid, regular, light, and duotone styles of every icon in Font Awesome. We also separated out brand icons into their own style/category for easier use. (And with Version 6, we are adding Thin style and a whole new Sharp family.) Here are the different style prefixes in action:

  <i class="fas fa-camera"></i> <!-- solid style -->
  <i class="far fa-camera"></i> <!-- regular style -->
  <i class="fal fa-camera"></i> <!-- light style -->
  <i class="fad fa-camera"></i> <!-- duotone style -->

Does the style you want to use require a Pro license? - Some of our styles and icons are only available to Font Awesome Pro license-holders (and active subscribers if using the Pro CDN). Check the icon gallery or detail view of any icon to see if Pro is required. If you don’t have one, you can always grab a license.

Your CDN isn’t working on my site or app. What gives?

Are you using our official CDN? - Font Awesome has had a free version and been open source for a long time. During that time, other folks have set up their own popular CDN versions of Font Awesome. We only maintain and manage the official Version 4 and Version 5 CDNs. If the code you’re using is from somewhere else, please contact the maintainers of the CDN/site for support.
Did you add your domains to the Pro CDN whitelist? - Our Pro CDN requires that you list out which domains you’ll be using Font Awesome Pro on. If your site isn’t listed, it can’t use Pro icons via the CDN. Also, make sure that your DNS isn’t expecting a www. as part of that domain. If it is, add that as a separate domain.
Do you have an active Pro subscription? - If you’re trying to use our Pro CDN, you’ll need to have an active Pro subscription that grants you access to services, including the Pro CDN.
DNS Issues - We do get reports from time to time of users having issues resolving the hostnames for our CDN. (use.fontawesome.com or pro.fontawesome.com). Typically this is due to a local network configuration issue or an issue with the ISP. Some of the steps to troubleshoot this: Try using nslookup (You can Google for instructions on how to use this with your operating system). Check other DNS servers by changing the server you are using. An example nslookup command would be: nslookup use.fontawesome.com 8.8.8.8. You can replace 8.8.8.8 with another DNS server IP address. (Look them up by different countries here). DNS checkers can also be used to verify that a domain name is valid.
Double-Check Your Referrer-Policy - If you’re using our Pro CDN and none of the above is fixing your issues, make sure that you did not configure your referrer policy to no-referrer option, which removes the referrer header our Pro CDN uses to determine if a domain can use Pro icons. If this is the case, set your Referrer-Policy to strict-origin (recommended), strict-origin-when-cross-origin, or origin. If you don’t have control of your server config or would rather do it alongside your HTML, you can use a <meta /> element to set it. Here’s an example…

  <html>
    <head>
      <meta name="referrer" content="strict-origin" />
      <!-- Pro CDN references and other meta, styling, and scripty bits -->
    </head>
    <body>
      <!-- icon references and your awesome UI go here -->
    </body>
  </html>

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 some specific guidance for you.

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 use our kits, if you have access in your site-building tool to:

Add HTML to the <head> of your pages/templates
Add HTML in your pages’ content to reference icons

You should be fairly familiar with HTML and working in .html files to do the above.

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

If you’re using WordPress, our plugin may be able to automatically resolve this for you.

You could use Conflict Detection to spot where the theme is loading a conflicting version of Font Awesome, which might give you a clue as to how to remove it. Your mileage may vary as each themeable web framework has its own way of handling the loading of assets like Font Awesome.

If you can write code, or can get a web developer to help, you might be able to write some JavaScript to pluck that conflicting version of Font Awesome out of your web pages.

Our hosted Font Awesome kits can help with this. We’ve added 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 5 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 5.

Can I use Font Awesome 4 and 5 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.

If you have no choice to load both versions, we recommend using a hosted Font Awesome kit to serve and load Version 5 in your project. We’ve added a feature to help resolve any conflicts with older versions of Font Awesome your project may still be loading. This is your best bet to help navigate those collisions and load what you need.

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?

How can I serve and/or use just the icons my project needs?

Your best option is to use a Font Awesome Kit which automatically creates a subset of just the icons you are using on your site. We also have the icon subsetter app available on our downloads page that allows you to create leaner and meaner subsets of Font Awesome with just the icons you need for you to host yourself.

Alternatively, you can adjust your code to reference just the styles you need. Using our CDN settings, you can select just some styles instead of All. When hosting your own Font Awesome files, select the specific styles that you need.

If you’re technically inclined, our JavaScript API does have a way to subset icons. If you’re using the SVG + JS framework and don’t mind editing JavaScript source code, you can take matters into your own hands by manually editing any of the style JS files we include in the download (e.g. /js/brands.js or /js/solid.js). You can remove any you’re not using (or wipe them all and just re-add things).

I’ve tried upgrading from Version 4 to 5, but its not working.

Font Awesome kits are the easiest way to upgrade painlessly from Version 4 to 5. We’ve added a Version 4 Compatibility feature for use right out of the box, err, kit. This feature will help address name and unicode differences between versions as well as help resolve any conflicts with older versions of Font Awesome your project may still be loading.

If Kits aren’t right for your project, follow the steps detailed in our upgrading guide. Most often folks forget to remove old assets or update their references to the new version’s assets. If a certain icon isn’t showing up, its name may have changed. If an icon’s style has changed too much on you, you may find the regular style more similar to the old Version 4 icon.

And if you’re still having trouble, try using Conflict Detection to see if that old version of Font Awesome is still loading and conflicting with your new version.

The file sizes for Font Awesome are too big for me or my project’s performance. What can I do?

Yeah, we have a LOT of icons! Your best option is to use a Font Awesome Kit which automatically creates a subset of just the icons you are using on your site. Or if you are self-hosting your assets, you can use the icon subsetter app available on our downloads page that allows you to create leaner and meaner subsets of Font Awesome with just the icons you need.

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

Sorry! You can always ask our community if anyone has experience with or guidance for your situation. If you think you’ve spotted a bug, we’d love to know. Fill out a bug report and we’ll be in touch. If you want or need a feature we don’t have yet, we want to know that too - give us the details on what you’re thinking.