Icons used in topbar aren't displaying correctly, even with CSS that's supposed to fix it!

Support
#1

Hi, I previously contacted yourselves about the icons not displaying correctly after a recent update and you provided me some CSS to fix it, and it worked, however, I’ve come to use it on a new website I’m doing and it doesn’t work! I have no idea why either, as it’s the exact same CSS and also the same HTML for the topbar (just changed contact details). Would you mind taking a look for me and letting me know what’s going on with it please!

Here’s the HTML:
Contact us today <font color="#eee"><i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i></font><a href="tel:01234567890"><font color="#fff"><strong> 012 3456 7890</font></strong></a></font> <font color="#eee"><i class="x-icon x-icon-mobile" data-x-icon="" aria-hidden="true"></i></font><a href="tel:01234567890"><font color="#fff"><strong> 01234 567 890</font></strong></a></font> | <font color="#eee"><i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i></font> <a href="mailto:info@website.co.uk">info@website.co.uk</a>

Here’s the CSS:
/* X Icons /
.x-icon-phone {
transform: rotateY(180deg);
}
.x-icon-mobile:before {
content: “\f3cd”;
}
[data-x-icon-o], [data-x-icon-s], [data-x-icon-b], [data-x-icon], [class=“x-icon-”] {
font-weight: 200;
}

I’ll put the URL in a secure note.

Thanks!

#2

Hi there,

Thanks for writing in! 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.

Also checkout FAQ section of https://theme.co/apex/forum/t/release-notes-pro-2-2-x-6-2-cornerstone-3-2/38234

Let us know how this goes!

#3

Hi, thanks for the info, however I’m trying to flip the phone icon so it is facing the other way - how it was before Font Awesome updated their font. The CSS code I was given by yourselves has worked on my other sites, but for some reason it’s not having any effect on this one!

Cheers

#4

Hi There,

Thanks for the clarification!

However, I can see the rotation CSS is working fine on your website for the icon.

Let us know if you are looking for something else.

Thanks

#5

The rotation is supposed to make the icon appear the other way, facing inwards instead of outwards as it currently does. Here’s a screen grab from another site I did with the rotation CSS working correctly, so the icon is facing into the telephone number:

Thanks!

#6

Hi there,

please remove the css and it will work that way.

Hope this helps!

#7

Hi, I’ve removed the CSS but nothing has happened! I’ve refreshed my page and cleared my cache but it’s still the wrong way round. I’m getting really confused with all this!

Thanks

#8

Hi there,

Thanks for clarifying.

Please try this code:

.x-topbar .x-icon-phone {
    transform: rotateY(180deg) !important;
}

Hope this helps.

#9

Hi, that’s sorted it, thank you!

#10

You’re most welcome!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.