Icons not showing up due to CORS, htaccess rules added but not working

Icons in the homepage are not showing due to CORS error, assets are stored in the Hummingbird CDN, if the CDN is disabled some icons work the first and the fourth, second and third not displaying even when CORS is no longer present in the console. When enabling CDN icons disappear again.

Rule added to htaccess:

<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>

Icons are part of font awesome.

Thanks in advance!

  • Predrag Dubajic
    • Support

    Hi Bevan,

    I was doing some extensive testing on your site and I disabled all the HB rules and disabled caching and then plugin as well, I also removed some of the Defender rules (I reverted all the changes one I finished testing) but then icons were still not showing for me, so it seems that it's either something else is causing this or there's some other kind of caching preventing the changes from being shown.

    Do you have any kind of server-side caching, except for StackCache as that is disabled, that could be caching the old look of the site and are not allowing the changes I made to be visible?
    Can you get in touch with your hosting provider and ask them to disable all caching on server side until we're checking this out?
    Or would it be possible to setup a staging site (without caching) where we could investigate this further?

    Best regards,
    Predrag

  • Adam Czajczyk
    • Support Gorilla

    Hello Bevan

    Yes, we do see the site assigned to this ticket (the "vint.....ugs.com" site) and it was also indicated in the live chat - and whenever the ticket is created here based on live chat, the chat support agent provides us with the notes about the issue and other related issues :slight_smile:

    That said, do I correctly understand that you managed to solve the problem or do you still need assistance? Let me know and if it's solved you can also simply use the "mark as resolved" checkbox while posting your response here - this will mark the ticket as resolved :slight_smile:

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Bevan

    Thanks for response.

    After checking the site I found out what's causing this, though I must say I'm still not sure why. The problem is because of the font styles loaded.

    The WPBakery Builder is using "FontAwesome" font for icons and is loading relevant styles. However, there seems to be also "Font Awesome 5 Free" font loaded - which is also Font Awesome but slightly different version - which simply doesn't contain the icons chosen.

    When you select icons in page editor in back-end, those icons show up properly because only the relevant style is loaded but on front-end "something" is also loading another CSS style from Font Awesome that "overrides" the same icons with "Font Awesome 5 Free" font instead of just "FontAwesome". This makes these icons disappear.

    In browser developer console it's possible to disable that style to see how the site would behave without it. Doing this immediately makes missing icons show up again, confirming what's causing the issue.

    However, I'm still not sure why this is happening. I think we could try a "forced workaround" though so you might try adding this CSS to the custom CSS on the site (e.g. in Theme Options):

    .fa, .far, .fas  {
    	font-family:'FontAwesome'!important;
    }

    You'd most likely need to clear the cache after it's added but when applied via browser it does the job so I think it should work. Would you give it a try, please, and let me know?

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.