April 26, 2018

Social Icons Showing Up as Squares!

We’ve experienced social icons showing up as squares a few times and have pulled together several fixes should you run into this problem and are looking for a fix.

Fixing your Social Icons Showing Up as Squares

With WordPress, no two sites are the same so there is no single solution for your social icons showing up as squares. With all issues though, you’ll want to backup first then clear your cache… then move through the relevant next step below.

Step 0: Backup, backup, backup!

I cannot stress this enough, before you do anything, please backup your website, we love UpDraftPlus but there are several great backup plugins you can deploy. Regular backups save you from the head and heartache of a simple task taking your site down. Backup regularly friends!

Step 1: 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 your cached 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 this is the case.

Step 2: Check your WordPress Settings, If Applicable

In your WordPress Admin, check to see that you have not accidentally unchecked the Font Awesome icon setting and prevented the Theme from loading the necessary icon font files.

  1. Login to your WordPress dashboard.
  2. Go to Appearance -> Customize -> Advanced options -> Front end icons ( Font Awesome )
  3. Find and check the option Load Font Awesome resources
  4. Save and Publish
  5. Clear any cache and browser history.
  6. Re-visit your website.

Validate Cross Origin Resource Sharing ( CORS ), If Applicable

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 your social icons showing up as squares.

There is two way to determine whether this is cause 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 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 has 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.

Content Delivery Network, If Applicable

If you are using a Content Delivery Network ( CDN ) to load your font files and your social icons are showing up as squares, 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.

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 seek an expert as an error can take down your entire site.

Again, if I did not impress upon you the importance of backing up in the beginning then I will close with this:

Backup before troubleshooting your social media icons please.