Icons not appearing (especially in Firefox)

The icons – including submenu indicator arrows – in ShiftNav are font icons. Some browsers – most commonly Firefox – enforce a Cross-origin resource sharing (CORS) restriction policy for fonts. As a result, if you serve the Font Awesome font assets from a different domain, Firefox (and depending on your server configuration, other browsers as well), will not load the fonts due to this policy, so the icons are not displayed.

CDN (Content Delivery Network)

The most common occurrence is using a CDN. For example, if your site is mysite.com, but your stylesheets are served from cdn.mydomain.com, or cdn.someothersite.com, the browser will not load the fonts because they are served from a different domain (their “origins” are different).

The Solution

There are two options to resolve the issue: either serve your fonts from the same domain as your site, or configure the fonts on your secondary domain to be served with the appropriate headers to allow cross-origin resource sharing.

Serve the files from the same domain

This generally means that you would exclude the Font Awesome files from your CDN, and link the files on your main server instead. The font file itself is the important resource, but generally this would come down to excluding the Font Awesome stylesheet. If you’re using ShiftNav copy, it is found at

/wp-content/plugins/shiftnav-pro/assets/css/fontawesome/css/font-awesome.min.css

/wp-content/plugins/shiftnav-responsive-mobile-menu/assets/css/fontawesome/css/font-awesome.min.css

This solution will work, but you won’t be able to take advantage of your CDN for these files.

Set the font headers to allow cross-origin resource sharing

This means that you would configure your server to tell the browser that it’s okay to load these resources from a different domain.

What you’ll need to do is set the Access-Control-Allow-Origin header to * for the fonts. If your server is running apache, this generally just means dropping an .htaccess file into the directory containing the font with the following configuration

<FilesMatch ".(eot|ttf|otf|woff)">
	Header set Access-Control-Allow-Origin "*"
</FilesMatch>

ShiftNav’s Font Awesome assets are located in the ShiftNav plugin folder assets/css/fontawesome/fonts/

For more information, see this great article from David Walsh: CDN Fonts

Of course, some servers won’t allow this, and it will vary from server to server. If this solution does not work, please contact your host and they should be able to assist you.

More resources

An alternative scenario

If you are not using a CDN, the alternative may be that your WordPress install is not properly configured. For example, if you are redirecting all traffic to the www subdomain of your site, but serving your CSS and JS resources from the non-www domain, you can encounter the same issue.

In other words, your site is displayed at www.mysite.com, but your stylesheet is loaded from http://mysite.com/.... These are two different origins, and the cross-origin restriction applies.

In this case, it is best to just make sure you have your WordPress configured properly to set your base URLs to a consistent domain – either with or without the www.

ShiftNav