How To Repair CORS Coverage Error: FontAwesome Icons Not Working With MaxCDN

April 28, 2018 0 By Mr Kings


Serving your static information by means of a content material supply community (CDN) is among the some ways to velocity up a web site. In the mean time, I exploit MaxCDN and it has been nice. Integrating the service with WordPress isn’t tough to this point you utilize a caching plugin like W3 Complete Cache or WP Tremendous Cache. Nevertheless, in case you show icons in your web site utilizing FontAwesome, issues break and icons seem as squares.

font awesome appearing as little squares

Within the picture above, the search icon beside the enter discipline seems as a bizarre little field. I’ve been having this subject over the previous couple of months. Unusually, this occurs solely on Google Chrome and Opera. Every part seems to be nice after I checked the web site on Safari and Firefox. I ignored it for some time, however I needed to discover a technique to repair it since most of my guests use Google Chrome.

Checking the browser console, the error was described as:

Redirect from ‘<useful resource CDN URL>’ to ‘<useful resource web site URL>’ has been blocked by CORS coverage: No ‘Entry-Management-Enable-Origin’ header is current on the requested useful resource. Origin ‘<web site>’ is due to this fact not allowed entry.

Why that is taking place

In accordance with MaxCDN:

When utilizing Webfonts through @font-face or different CSS3 strategies, some browsers like Firefox and IE will refuse to embed the font when it’s coming from a third occasion URL as a result of it’s a safety threat.

Fixing that is fairly simple and there are literally two methods to go about it.

Modifying MaxCDN’s settings to permit Cross-Origin Useful resource Sharing

This was all I did to get this subject fastened.

1. Log in to your MaxCDN account and choose your pull zone.

2. Choose the Settings tab.

3. Underneath Edge Settings, allow Add CORS Header and save.

MaxCDN EDGE settings

4. Choose the Handle Cache tab and Purge All Recordsdata.

purge maxcdn

5. Should you use cache plugins like W3 Complete Cache or WP Tremendous Cache, be sure you purge all the things. This additionally applies to Minify plugins like Quick velocity minify.

This could repair the issue and FontAwesome icons ought to begin showing usually.

font awesome search icon

If this isn’t working, you may strive the second repair.

Modifying your .htaccess file

If the repair above doesn’t work on your, log in to your internet hosting management panel and put these codes into the .htaccess file:

# ----------------------------------------------------------------------
# CORS-enabled photos (@crossorigin)
# ----------------------------------------------------------------------
# Ship CORS headers if browsers request them; enabled by default for photos.
# developer.mozilla.org/en/CORS_Enabled_Image
# weblog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Safety/Evaluations/crossoriginAttribute
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    # mod_headers, y u no match by Content material-Kind?!
    <FilesMatch ".(gif|png|jpe?g|svg|svgz|ico|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Entry-Management-Enable-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
# ----------------------------------------------------------------------
# Webfont entry
# ----------------------------------------------------------------------
# Enable entry from all domains for webfonts.
# Alternatively you possibly can solely whitelist your
# subdomains like "subdomain.instance.com".
<IfModule mod_headers.c>
  <FilesMatch ".(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Entry-Management-Enable-Origin "*"
  </FilesMatch>
</IfModule>

Note that the code above solely works for Apache servers. Should you’re operating an IIS, Nginx or a special type of server, read this tutorial and verify the server you are operating.

How To Repair CORS Coverage Error: FontAwesome Icons Not Working With MaxCDN 1
0 Shares