Social Icons Quality Reduced or Disappeared?

[russell3]

For some reason my social icons at the very top left of my site https://www.steedman.co.uk have become very poor quality.

This is in Safari. In Firefox and Chrome they are not really displaying at all.

I recently updated Cornerstone and X Theme so it is not to do with that but I unsure as to why this has happened?

Thanks for any help

[mldarshana]

Hi There @russell3

Thanks for writing in! Upon checking your site, I see that your X theme is not fully updated. There is a social icons related changes and bug fixes with the latest release, so you need to update to the latest version. You can read more information from here (https://theme.co/changelog/) and update accordingly (https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62).

Make sure to purge your server cache and clear your browser cache before testing.

In case if you have extended or customized those social icons using a child theme, you will need to check all files in your child theme and replace data-x-icon with data-x-icon-b to make your social icons load again.

Let us know how it goes.
Thanks!

[russell3]

Hi

I have updated to the latest version of X but the problem is still persisting. I also emptied the cache after updating but it is still displaying incorrectly.

Thanks

[russell3]

I also changed the data-x-icon fields in my child theme functions.php to data-x-icon-b but this did not help either?

[rad]

Hi @russell3,

The temporary workaround for now is overriding the styling. Please add this CSS to your child theme’s style.css

    .x-icon-youtube-square:before {
     content: '\f431' !important; 
    }
    .x-icon-rss-square:before {
     content: '\f143' !important;
     font-family: "FontAwesome" !important;
    }
[data-x-icon-b]:before {
    font-weight: 300 !important;
} 

This should display the missing two icons. And the last one should reduce its thickness a bit for quality.

Thanks!

[russell3]

OK that’s great. However I removed the code from the Child Theme functions.php file (as I had altered it to display the icons in a different order) and added:

[data-x-icon], [class*=“x-icon-”] {
font-weight: 400 !important;
}

to the global.css

I found that on another thread. I would still like to have the LinkedIn logo first, then Twitter but as this seems to be looking how I want it to I can live with it.

Thanks again

[christian]

You’re welcome.