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. It means your web hosting server isn’t managed/setup 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 the error message you will see something like this in red color:

Font from origin 'http://www.your-domain.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.your-domain.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 any further assistance, you can open a ticket on our support site (login required):
https://support.inspirythemes.com/ask-question/