[Resolved] Locally integrating font awesome causes wrong icons

Home Forums Support [Resolved] Locally integrating font awesome causes wrong icons

Home Forums Support Locally integrating font awesome causes wrong icons

  • This topic has 5 replies, 2 voices, and was last updated 1 month ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2045988
    Hermann Josef

    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&#8221; 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

    #2046290
    David
    Staff
    Customer Support

    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 ?

    #2049650
    Hermann Josef

    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.

    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
    additinal setting in the customizer

    Here you see the correctly rendered icons in https://admin.regenpfeifer.net/:
    https://cloud.regenpfeifer.net/s/Q8Z79CcdWZcbzLx
    correctly rendered font

    Here you see the problems with font awesome in https://regenpfeifer.eu/:
    https://cloud.regenpfeifer.net/s/sX2WfGfrf9xjbrY
    weird icons

    #2049722
    David
    Staff
    Customer Support

    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:

    2021-12-15_11-27-50

    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.

    #2050188
    Hermann 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 Josef

    #2050291
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.