Archived topic
Locally integrating font awesome causes wrong icons
5 replies · Started by Hermann Josef on December 11, 2021
Hello,
I would like to integrate font awesome locally in my site. For this I have done the following steps:
1) Downloaded the font awesome package from the website and saved on my webserver.
2) Created a hook "wp_header" in Generatepress with the following content: <link href="https://my.site/fonts/fontawesome/css/all.css" rel="stylesheet">
3) Added css-classes to some menu entries (navigation menu in the top bar of my site)
Unfortunately, this seems to work only partially. Some icons are shown correctly, therefore I suppose, that the integration works basically. But some other icons are shown completely wrong.
"fas fa-users" works, whereas "fas fa-yin-yang" or "fas fa-church" or "fas fa-dove" produce weird icons.
I have installed all versions of "fa-solid-900" on my server. Maybe the local version of font awesome doesn't contain all icons? Or could there be another reason for this problems?
Thank you very much for any help!
Yours, Hermann Josef
Hi there,
as long as the icons aren't Pro and they're are in the version you downloaded then there should be no reason why they don't load.
I had a quick look at your site, and i can see the Ying Yang icon, and i changed one of the icon classes to: fa-church and that too displayed correctly.
Maybe the browser caches needed clearing ?
Hello David,
thank you very much for your answer! I have tried and checked a lot of things in the last days - unfortunately, I did not find a solution. I am still not seeing the correct symbols of font awesome.
It is very strange, because I have two, almost identical sites on the same server. Both sites are powered with Generatepress, Generateblocks and the same set of plugins.
- On https://admin.regenpfeifer.net/ the font awesome symbols in the top bar are shown correctly.
- Whereas on https://regenpfeifer.eu they are looking weird.
I have done the following steps:
- Cleared browser cache.
- Deactivated all plugins, except Generatepress / Generateblocks
- Compared all Customizer options between both sites
- checked the Apache VHost and .htaccess settings
I didn't find any difference in the settings. Only one small detail was different:
The site https://admin.regenpfeifer.net, where the font awesome icons are working, showed an additional setting in the customizer: "More settings. Colors. Typography" (cf. this picture: https://cloud.regenpfeifer.net/s/nJRPMef5qmLMkn5). This setting is lacking in the site https:// regenpfeifer.eu/
I am aware of the fact that my problems with font awesome may not necessarily be connected with Generatepress. But I didn't find any other reason. Therefore, I just want to rule out, that I have overlooked anything.
So, if you have any further hint for me, to find the cause of this issue, I would be very grateful.
Thank you very much,
yours, Hermann Josef
Here you can see the additional setting in the customizer:
https://cloud.regenpfeifer.net/s/nJRPMef5qmLMkn5
Here you see the correctly rendered icons in https://admin.regenpfeifer.net/:
https://cloud.regenpfeifer.net/s/Q8Z79CcdWZcbzLx
Here you see the problems with font awesome in https://regenpfeifer.eu/:
https://cloud.regenpfeifer.net/s/sX2WfGfrf9xjbrY
Its not a theme related issue.
If you Right click > Inspect your .eu site and check the Console tab you will see list of CORs errors - see here:
https://www.screencast.com/t/ik0w7Qsu45QQ
the request for Font Awesome on that site is being made from a different URL ( a sub domain of your .net site ). Chroms is blocking is a Cross Origin risk.
Thank you very much, David! Your tip helped me to find the solution for my problem.
I had to set an "Access-Control-Allow-Origin"-Header in the Apache VHost of the outgoing site / resource.
Your doing great work at Generatepress with a very good support!
Yours, Hermann Josef
Glad to hear that!
