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.someothersite.com, the browser will not load the fonts because they are served from a different domain (their “origins” are different).
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
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
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.
- Wikipedia: Cross-origin resource sharing
- Mozilla: HTTP Access Control (CORS)
- David Walsh: CDN Fonts
- W3 CSS Spec: Same origin font restriction
- HTML5 Rocks: Using CORS
- Amazon S3: Enable Cross-Origin Resource Sharing
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