Support » Requests and Feedback » Icons not displaying in Chrome

  • miadekock

    (@miadekock)


    Good day,

    The icons in the header of our site, and in the top menu, are not displaying correctly. I have done the following:
    Checked in the back-end- it shows
    Checked on my iphone- it shows
    Checked on internet explorer- it shows
    Cleared my cache
    Went to Elementor> settings> Load Font Awesome 4 Support is ticked

    Please help. Thanks so much!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hey @miadekock,
    This could be caused by a plugin conflict.
    Try disabling all your plugins and after clearing the cache, re-enable them one by one to check which plugin is causing the issue.

    I don’t think this is a plugin conflict issue; but a server misconfiguration leading to Cross-Origin Resouce Sharing (CORS) policy invocation blocking the loading of the Font Awesome fonts that generate the icons.

    When I enter the website from https://www.rosstone.co.za/ (note HTTPS), the icons DO appear. The but the icons don’t appear when I enter from http://www.rosstone.co.za/ (ie HTTP)

    I see several instances of the following errors in the browser console:

    Access to font at 'https://www.rosstone.co.za/wp-content/plugins/mega-addons-for-visual-composer/css/font-awesome/webfonts/fa-regular-400.ttf' from origin 'http://www.rosstone.co.za' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    Here, the address: http://www.rosstone.co.za/ (note: HTTP) is trying to load the Font Awesome font file from the URL beginning with https://www.rosstone.co.za/ (note HTTPS)

    The hostname is the same (www.rosstone.co.za), but from a CORS policy perspective, the HTTP and HTTPS versions of the address are different “origins”.

    This problem is occurring because, while your website is configured to use HTTPS, your server is not ENFORCING HTTPS (ie the server is serving requests at both HTTP and HTTPS, instead of automatically redirecting HTTP to HTTPS).

    You can change your CORS policy to allow this, that’s side-stepping the real problem. The proper solution is to configure your webserver to automatically forward all HTTP requests to HTTPS.

    Thanks so much for the feedback Prabhat and George. @george, I will definitely look into this. Appreciate you guys!

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.