Inspiry Menu Created with Sketch.
RELATED TO: Common Issues

Hello,

If you just updated your theme or installing the theme for the first time and you are unable to see the actual font awesome icons instead you are watching rectangular boxes then your web hosting server isn’t set up properly to allow its resources to be used when they’re requested by a page with a different origin so this is not a theme related issue.

If you will inspect your website in Chrome and check the console for error message you will see something like this in red color:

Font from origin 'http://www.arvilaglobal.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.arvilaglobal.com' is therefore not allowed access.

You can fix the issue by simply adding the following code into the .htaccess file of your WordPress website:

# ----------------------------------------------------------------------
# CORS-enabled images / fonts and other stuff (@crossorigin)
# ----------------------------------------------------------------------
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    # mod_headers, y u no match by Content-Type?!
    <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Once the above code is added then please check your website and it will load the icons.

For further assistance you can always contact our support forum.

Thank you!