I've used X Icon for the telephone, email and address icons and they were fine yesterday but today they're not displaying correctly!

[core365]

Hi, I’m working on a site and I’ve been using the X Icons within the text to put a telephone icon before the telephone number, and envelope icon before email address etc and they were displaying fine yesterday, but I’ve gone to work on the site today and the phone icons have been flipped like a mirror image and are facing the opposite way! Instead of facing into the right, they are now facing out to the left! I have no idea how to correct this. The map marker has also now lost the smaller white centre circle, so it now looks more like a rain drop!

I’ll put mu URL in a secure note as it’s on a temp link, but I’ve included screen grabs for your reference.

Thanks!

[Alaa]

Hi @core365

This might be related to the recent theme update that included Font Awesome 5 icons, you can add this CSS snippet to (Theme Options > CSS) to get back your old icons:

.x-icon-phone {
    transform:rotateY(180deg);
}
.x-icon-map-marker:before {
    content: "\f3c5";
}

Thanks.

[core365]

Hi, thank you for that!

Have you got the CSS fix for the mobile phone icon too please.

I was told to use the X Icons shortcode by yourselves last year instead of using the font awesome icons when it’s set within text. After this latest update, is it now a case of using font awesome instead?

Also, the Classic Gap element doesn’t seem to be working now after the latest update and I’ve had to go through my site replacing all the Classic Gap elements with the latest version one.

Thanks!

[Alaa]

Hi @core365

• Where is this icon published on your website?

• Yes, you can use the updated font awesome icons now.

• I’ve checked both the Classic Gap and the V2 Gap and they are both working fine, please provide us with WordPress Dashboard login details in a Secure Note so we can investigate this issue.

Thanks.

P.S. If you don’t know how to send a Secure Note, please check this article.

[core365]

Hi, the icon is on a different site I’m doing using X Theme, I thought it might just have been easier to ask for a fix for that icon instead of having to submit a new post for it! Are you able to tell me or do I need to start a new post for it?

The problem is, I used font awesome for the icons within text areas before and after an update last year they stopped displaying so I was told by yourselves to use the X Icon shortcodes. It seems after every update to X Theme and Cornerstone there are glitches/issues created and it’s the time it takes to try to sort a fix for these things out that’s the main problem, as I always try to do it myself before contacting yourselves. It’s just extra hassle I don’t need! So I’d like to use the font awesome fonts if there’s a guarantee I won’t have to revert back to the X Icon shortcodes after another update!

Thanks!

[ruenel]

Hey There,

A few hours ago, we just release X 6.2.3 and Cornerstone 3.2.3 to resolve the icon issues. I would suggest that you update to this version so that all your X Icon shortcodes issues will be resolved. We apologizes for the inconvenience. All the icon issues is because of the changes and update we did to have the Font Awesome 5 in the theme.

We would loved to know if this update has work for you. Thank you.

[core365]

Hi, I’ve updated Cornerstone and X Theme and emptied my cache and refreshed my page, but the issue with the icons hasn’t been resolved. I’ve kept the CSS fix in for the telephone icon so it faces the correct way round, but there’s still no screen area on the mobile icon, it just looks like a block! Are you able to supply me with the fix for that please.

https://www.ukcaringservices.co.uk/

Thanks

[Prasant]

Hello @core365,

Try adding following CSS and let us know how it goes:

.x-icon-phone:before{content: "\f3cd";}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[core365]

Hi, that’s sorted it, thanks! I appreciate the link too!

Cheers

[paul.r]

On behalf of my colleague, you’re welcome, Cheers!