Social Icons showing up as square

When you view your website, you found that the social icons are showing up as squares instead of the respective icons. This could happen due to a few reasons. The following are the troubleshooting procedures.

Clear Cache Plugin or Server Cache

  1. If you are using a cache plugin such as W3 Total Cache or WP Super Cache plugin. You will need to clear its cache content in order for the front end content to be updated.
  2. If your web hosting company has a server cache, you will need to clear it in order for your content to be updated on the front end. You will need to contact your web hosting company if you are not sure if there is any server cache on your web hosting package.

Cross Origin Resource Sharing ( CORS )

Your icon font files could be loaded from a URL that has a different domain name structure than your website URL. This will result in  Cross Origin Resource Sharing and browsers such as Firefox and Chrome will block your icon font files and prevent them from loading into your browser. This will result in icons showing up as squares.

There is two way to determine whether this is caused by CORS.

  1. View your website in Safari browser, you will be able to see your Social icons showing up properly. Your Social icons will only show up as squares in Firefox browser and Chrome browser.
  2. Look into the Console of developer tools such as Firebug for Firefox. You will see an error message similar to the following.

    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at  http://example.com/wp-content/themes/onepress/assets/fonts/fontawesome-webfont.woff2. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

How to fix this?

  1. Login to your WordPress dashboard.
  2. Go to Settings -> General
  3. Find the settings -> WordPress Address (URL) and Site Address (URL)
  4. Make sure both settings have identical values. For example:
    • In your Site Address (URL), you have entered http://www.example.com
    • Make sure in WordPress Address (URL) input, you have entered http://www.example.com
    • A difference such as HTTP and HTTPS or WWW will cause CORS issue.
  5.  If none of the above works then try to add this code to .htaccess file: 
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

If you are using a Content Delivery Network

If you are using a Content Delivery Network ( CDN ) to load your font files, you will need to contact your CDN provider and ask them for the codes to add in your .htaccess to enable Cross Origin Resource Sharing. 
The is an  example of a CDN provider.

You will need to contact your web hosting company for assistance if you do not know what is a .htaccess file or how to alter it properly. Doing it wrong will cause internal errors on your web server and crash your site.