Social Media Icons Not Showing Correctly

[mikedoughty]

Hi,

Our Social Media icons are not showing in our footer, and also not showing in the header either.

How can I fix these?

website url https://getbusiness.fit

Thanks, Mike

[friech]

Hi Mike,

Try clearing any caching plugins you have active or the cache provided by your host. We updated FontAwesome with (Pro 2.2, X 6.2, Cornerstone 3.2) 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.

In your case, it seems the social icons on the footer is hardcoded on a text widget, please navigate to Appearance > Widgets and find that text widget on Footer 1 area.

Find the data-x-icon on the code and update it to data-x-icon-b

Hope it helps,
Cheers!

[mikedoughty]

Hi, Thanks, I changed the code to data-x-icon-b and that fixed the issue.

Is there somewhere where the background of the icons is set? As it’s showing as white at the moment and would like to change that to yellow.

Thanks, Mike

[friech]

Hi Mike,

That is actually the icon itself and not a background, to change its color please add this to X > Theme Options > CSS

footer .x-social-global a i {
	color: yellow;
}

Hope it helps,
Cheers!

[mikedoughty]

Thanks, that worked well.

[friech]

You’re welcome,

Cheers!