If you are using web hosting company like WPEngine which has built in CDN, or if you use CDN service with popular web hosts like Bluehost, you will notice that icon fonts like Font Awesome or Elegant Themes Icon Font will not display in Firefox and Internet Explorer. A small square will display instead of the font icon. The fonts will work fine in Google Chrome and Safari though.
The reason behind this issue is that Firefox and Internet Explorer doesn’t allow use of cross domain fonts, that is, fonts that are not hosted on your own domain. So any fonts that are hosted on external domain, or served via CDN will not work.
The solution to this issue is to set Access-Control-Allow-Origin header to the font files.
If you are using Apache web server, you can add the following code to httpd.conf or .htaccess file to set this header,
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
If you are using nginx web server, you can add this code to the virtual host file,
add_header Access-Control-Allow-Origin *;
}
This code will set the Access-Control-Allow-Origin header to font files and then the fonts will work fine on Firefox and Internet Explorer even if you are serving them via CDN or any external domain.
Update: If you are using Amazon web services (AWS S3) as CDN, you need to enable CORS on the bucket. To do this, go to Properties > Permissions > Edit CORS Configuration, and paste the following code,
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
If nothing else works, the only solution is to embed the icons font as base64.
Thanks to David Walsh and rtd.