[Support request] font awesome icons load issue

[Streater]

So I thought this was a Font Awesome issue for awhile… but then I realized the problem only occurs on the Desktop Nav and Mobile Menu.

The regular icons load fine in the menu, but Solid FA pseudo elements (font-weight: 900) aren’t loading in the menu.

I just realized that Solid icons CAN load in my footer (check out the star icon since it is not one of the brand icons). I tested this by taking the solid icons that aren’t loading in the menu, and placing them in the footer. So surprise, these icons can load on the site, just not in the menu. I tried apply the same settings that work for the star icon in the footer to the menu… not working.

Any ideas what the issue is?

[Elvin]

Hi there,

It seems like the font awesome file being imported to your site is missing some character.

You may have to re-import a new font awesome font set and make sure re-adjust the content: "\f***" CSS on your child theme to the correct one.

If I remember it correctly, I think font awesome has a pro version. Perhaps you were using a pro version at some point but then expired so some icons (the ones from Pro) stopped loading.

[Streater]

But all the icons work outside of the menu… I tested them. But as soon as I try adding the solid ones to the menu they don’t work.

The menu does not like solid icons as far as I have tested.

[Streater]

My only guess here… is the font weight of the menu over riding the font weight of the icons? The font weight for solid icons has to be 900. I added !important tags like this but still not doing anything.

.login a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f023";
  font-weight: 900!important;
}

When I inspect the :before elements… font-weight: 900!important is crossed out

[Streater]

Never mind… found the culprit!

[Elvin]

Never mind… found the culprit!

Nice one. Thanks for letting us know.

Have you fully sorted it out? Let us know if you need further help with it. 😀

[Author]

Posts