Phone icon facing wrong way and another one isn't visible

[core365]

Hi, I’m viewing the site I’m working on in Safari and even though I’ve used some CSS to change the way the phone icon is facing, it’s still showing the opposite way I want it to be! Also, there’s another phone icon that is there in Cornerstone, but isn’t showing on the front end. I’ve included a screen grab highlighting the 2 icons. I’ll put the URL in a secure note as it’s being built on a temp link.

This is the CSS I’ve used for the icons:

/* Icons */
[data-x-icon-o], [data-x-icon-s], [data-x-icon-b], [data-x-icon], [class*="x-icon-"] {
    font-weight: 200;
}
.x-icon-phone {
    transform:rotateY(180deg);
}

Thanks!

[rad]

Hi @core365,

Thanks for reaching out.

Looks like it’s related to this https://stackoverflow.com/questions/43075089/safari-css-transform-3d-rotation-glitch. How about just flipping it? Like from here https://www.w3schools.com/howto/howto_css_flip_image.asp

Thanks!

[core365]

Thanks for the URL link, they’re all now showing and facing the way I want!

Thanks for your help!

[rad]

You’re most welcome!