Setting up your WordPress site requires a huge amount of patience and knowledge about how Apache Servers work, how MySQL interacts with PHP, and finally lots of knowledge about front-end i.e. HTML/CSS/JS or jQuery.
The icons used in the front-end usually try to load ttf or woff font files from different domains or CDN’s. Sometimes the cache plugin that you use to speed up your website will cause some errors or disables some functions in your site (mainly Javascript/jQuery malfunctions).
But sometimes it’s not client-side and is from the server. If you check the browser’s console, you’ll see such error:
Access to font at from origin has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
This error tells you that the CORS* policy has blocked accessing to the cross-domain sources to load. And that causes improper loading of fonts or icons in the client-side, resulting in squares or empty icons.
* Stands for Cross Origin Resource Sharing
Luckily, there’s a simple solution for this. If you’re using Apache Server, and can edit .htaccess file, you can add this line at the bottom:
Header add Access-Control-Allow-Origin "your-domain.com"
Replace “your-domain.com” with your site’s domain name.
This should unblock the fonts or icons from loading. If that didn’t work, there’s an even more complete header-changer block of code to put at the bottom of your server’s .htaccess file:
## CORS Options RewriteCond %{REQUEST_METHOD} OPTIONS RewriteRule ^(.*)$ $1 [L,R=204] # Custom Headers Header set X-Content-Type-Options "nosniff" Header set X-XSS-Protection "1; mode=block" Header always set Access-Control-Max-Age 1728000 Header always set Access-Control-Allow-Origin: "*" Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT" Header always set Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,C$ Header always set Access-Control-Allow-Credentials true ## End of CORS Options