Cache Plugin Caused Icons Show Up as Squares?

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.

Installing Cache Plugin Causes Icons Show as Squares

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

How to Fix Icons Showing as Squares

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