Top bar social icons not displaying as retina icons

[razorfrogwebdesign]

Our team has created custom social icons to override the default top bar social icons since the client needed several different icons. The social icons file is displaying in an images folder in our child theme.

We are having difficulty with having these custom icons displaying as sharper retina icons on retina screens. The original filenames from the flexform theme folder have been preserved (“social-icons-mono-small.png” and “[email protected]”). We believe the issues that the retina script is simply not loading correctly or perhaps not being called with the child theme.

Is there a suggestion or easy fix you could provide? Thank you for your assistance.

[Swift Ideas – Ed]

You have a !important on the standard res icons, so that is taking precedent. You need to add !important to the retina declaration too:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
ul.social-icons.dark.small li a {
background-image: url('images/[email protected]')!important;
}
}

– Ed

[razorfrogwebdesign]

That did the trick!

Thank you for the fast fix. We appreciate your support.

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved. Thanks Ed. 🙂
With Best Regards
Mohammad