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’;
    }

You can typically determine what kind of server your website is hosted on by navigating to your website in a browser, open your browsers Dev Tools, select the WiFi tab and then select the opening page request. You can view your server's host type in the "response headers" section.

Please note that it is possible that your host shows as nginx in the browser, but your actual host is an Apache server. If this is the case, it is possible that your host has caching implemented that utilizes an nginx server, in which case the cache would need to either be disabled, or the nginx fix be applied by your host.

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.

After the above changes have been applied, clear the module template cache in ChamberMaster via the ISCP or in GrowthZone via GrowthZone > SETUP > WEBSITE > GROWTHZONE PAGES > { line item } > ACTIONS > CLEAR CACHE.

Scroll To Top