[Resolved] Fontawesome dont work in menu

[Juan Carlos]

Hi!

I have a problem. Im trying to add the icon of facebook in the secondary menu, but the icon dont appear.

I have even installed plugins to do it, but it still doesnt work.

Where is the problem?

[Leo]

Hi there,

Did you use FontAwesome icons like suggested here? https://docs.generatepress.com/article/adding-icons-to-menu-items/

If so can you make sure load essential icons option is not checked?
https://docs.generatepress.com/article/general-settings-overview/

If those are not the problem can you disable the coming soon page?

[Juan Carlos]

Now is ok.

With the new Fontawesome code didnt appear… (<i class=”fab fa-facebook”></i>)

Thanks!

[Leo]

Glad I could help!

[Tanya]

Hi Leo.
I have similar issue with Font Awesome.

I am using <i class=”fas fa-home”>Test1</i> and getting empty square instead of the image (or question mark on mobile).

“load essential icons option” was checked and I was not getting anything at all (empty space). Now I unchecked it and I get square/question mark, but not the icon. My coming soon page is disabled.

Any ideas what else could I try?
I am running WP4.9.4

[Tanya]

Hi Leo. Please disregard question above. I figured out that I had to use deprecated “fa”, not “fas” as prefix.

[Leo]

Glad you figured out 🙂

[Thierry]

Hello,

I follow this https://docs.generatepress.com/article/adding-icons-to-menu-items/

load essential icons isn’t checked but don’t work.

the website : https://www.hotel-muette.com

thx

[Leo]

Which item did you add it to?

What was the CSS you are using?

Did you clear WP Rocket cache?

[Thierry]

Hello,

yes wp-rocket desactived it’s the same.

the code <i class=”fa fa-facebook” aria-hidden=”true”></i> or <i class=”fas fa-facebook” aria-hidden=”true”></i>

I think that’s the problem is with WPML because i have this message on console :

downloadable font: download failed (font-family: “FontAwesome” style:normal weight:normal stretch:normal src index:3): bad URI or cross-site access not allowed source: https://translate.domain/wp-content/themes/generatepress/fonts/fontawesome-webfont.ttf

downloadable font: no supported format found (font-family: “FontAwesome” style:normal weight:normal stretch:normal src index:5) source: (end of source list)

[Leo]

So when you deactivate WPML it works?

[Thierry]

it’s the same thing.

[Tom]

You either need to make sure the URL you’re serving the font files from matches the URL you’re using in your browser, or you need to do something like this: https://stackoverflow.com/questions/13421463/htaccess-access-control-allow-origin

[Thierry]

Thanks, but why it’s works on all website and don’t work for this ?

[Tom]

I’m not sure what you mean?

This is a browser setting, which helps prevent unsafe files from being served on your website from a different URL.

[Author]

Posts