Social Icons are boxes instead of actual icons

[arswitzer]

At my website https://command-app.com the social media icons at the bottom of all pages are just square boxes, please advise!

[christian]

Hey @arswitzer,

Did you update X from a version before 6.2? Please try the solution detailed below.

@Themeco1

###Why are some of my icons are appearing as an empty square?

Try clearing any caching plugins you have active or the cache provided by your host. We updated FontAwesome with this release. Version 5 required changes to the markup, CSS, and the file location changed. Your site is probably serving the old markup which has references to the previous font location.

I’ve cleared my cache but it’s still happening. What do I do next? This could happen if your site has icon markup that you added directly rather than using our icon shortcode. As of Font Awesome version 5 they split icons into multiple fonts. This can be fixed by changing instances of the data-x-icon attribute to one of the following:

• data-x-icon-b for social icons.
• data-x-icon-o for outline icons.
• data-x-icon-s for solid icons.

The original attribute data-x-icon will still work for solid icons as a fallback but we’ve updated everything for consistency.

Additional details about the Font Awesome changes can be found in our previous release note. Also check our Changelog for details of all the changes in X and Cornerstone.

Thanks.

[arswitzer]

I am running X 6.4.6. I have cleared my cache as well. Where would I change the information for data-x-icon ?

[thai]

Hi There,

This issue occurs because of this custom CSS:

.x-icon-facebook-square:before, 
.x-icon-twitter-square:before, 
.x-icon-google-plus-square:before, 
.x-icon-linkedin-square:before, 
.x-icon-pinterest-square:before {
    font-family: fontawesome;
}

Please find and remove it.

Regards!

[arswitzer]

Works great! Thank you!

[ruenel]

You are most welcome!