Why are my font icons not displayed?

The most common reason, why icons are not displayed, is that they are requested from a different domain, than the one, you want them to show on. For example, your icons refer to http://domain1.com/ and you want to show them on http://domain2.com/ This is called a cross-origin HTTP request.

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. But when it is made, you get such an error in your browser console:

Font from origin ‘http://domain1.com/’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://domain2.com/’ is therefore not allowed access.

This problem may occur due to several reasons:

• You have recently migrated to a different domain, but migration went wrong.
• You made redirect to another domain in your Settings>General.

There is a workaround allowing cross-origin HTTP request. You need to copy paste the code below into your .htaccess file:

<IfModule mod_headers.c>
 <FilesMatch ".(eot|otf|svg|ttf|woff|woff2)$">
 Header set Access-Control-Allow-Origin "*"
 </FilesMatch>
</IfModule>

However, it is more recommended to make all resources load from one domain.

More detailed information on Cross-Origin HTTP requests you will find in this tutorial.