Skip to content

Icon Fonts Not Displayed On modules Enable Cors

Resources

If the icon fonts that your site uses are not displaying on the Module pages you most likely need to enable CORS (Cross Origin Resource Sharing). This will allow the browser to use the font files hosted on your main domain, on the sub-domain in use for your modules.

cors-issue-example-300x108

Example of Icons not displaying because of CORS not being enabled.

Typically this can be done by making a simple update to your .htaccess file (if your site is on an Apache server).

More information about enabling CORS, including instructions for various web server technologies, is available at www.enable-cors.org

Example of CORS update for a WordPress site (on an Apache server):

  1. Access your .htaccess file via FTP (note that if you do not see your .htaccess file when logged in you will need to locate and enable a setting to show hidden files)
  2. Add the following line just before the # END WordPress and save:
    Header set Access-Control-Allow-Origin "https://aname.yourorganization.org"

    Where the text between the double quotes (“”) is your organization’s ChamberMaster or MemberZone location. For instance, this text could be something like:

    https://business.mychamber.com
    or
    https://members.myassociation.com

  3. UPDATE: Later versions of WordPress may overwrite any values between before #END WordPress. If this be the case, you can add the following on a new line after #END WordPress.
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "https://aname.yourorganization.org"
</IfModule>

The entire section of code above should appear on a single line in your .htaccess file without a line break.  Placing it on two lines will break your site.  It displays as two lines above due to width constraints, but is only one line.  Also be sure not to copy paste the code above into Microsoft Word or into an editor  which turns the straight double quotes above into “curly quotes” prior to adding it to your .htaccess file because this would also break your site. Here is an example of what the htaccess file will look like.

Note that if you are not comfortable with modifying your .htaccess file, it is important to get assistance because a mis-configured .htaccess file can take down your site.  Be sure to make a backup of the file before uploading any changes and test your changes immediately.

If you have implemented it correctly the icons will be visible on the module pages once you refresh the page. If the modules still do not display the font/icons correctly, the .htaccess rule may have been placed in the incorrect location. Though placing the rule in the root .htaccess file may work in most cases, there could be other .htaccess files that are located in the site’s structure that are taking precedence over the root. If you suspect this is the case, please instead modify the .htaccess file that is in the closest folder to the font file.

Example of CORS update for a WordPress site (on an Nginx server):

  1. Access your config file.
  2. Add the following line to the end of the file and save:
    // mysite.conf
    location ~* \.(eot|otf|ttf|woff|js)$ {
    add_header ‘Access-Control-Allow-Origin’ ‘https://business.mysite.com’;
    add_header ‘Access-Control-Allow-Methods’ ‘GET, POST, OPTIONS’;
    add_header ‘Access-Control-Allow-Headers’ ‘DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range’;
    add_header ‘Access-Control-Max-Age’ 1728000;
    add_header ‘Content-Type’ ‘text/plain; charset=utf-8’;
    add_header ‘Content-Length’ 0;
    add_header ‘Access-Control-Expose-Headers’ ‘Content-Length,Content-Range’;
    }

If using Nginx server, instructions to enable CORS can be found here.

If using a Windows or IIS server, instructions to enable CORS can be found here.

Scroll To Top