- This topic has 5 replies, 2 voices, and was last updated 1 month ago by David.
December 11, 2021 at 12:48 pm #2045988Hermann Josef
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 JosefDecember 12, 2021 at 4:17 am #2046290DavidStaffCustomer Support
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-churchand that too displayed correctly.
Maybe the browser caches needed clearing ?December 15, 2021 at 3:32 am #2049650Hermann Josef
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:
December 15, 2021 at 4:31 am #2049722DavidStaffCustomer Support
Its not a theme related issue.
If you Right click > Inspect your
.eusite and check the Console tab you will see list of CORs errors – see here:
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.December 15, 2021 at 9:01 am #2050188Hermann Josef
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 JosefDecember 15, 2021 at 10:27 am #2050291
- You must be logged in to reply to this topic.