FontAwesome not rendering LinkedIn icon in Chrome and Firefox

[p4rd]

I have a website hot-pear.co.uk using Theme X v6.2.3 and Cornerstone 3.2.3

In the footer there is a link to a LinkedIn page and email. While both icons render okay in Safari, the Linkedin logo does not render in Chrome or Firefox. The exact same code works on a website (light-the-fuse.com) running Theme X 4.0.6 and Cornerstone 1.1.1. It looks like the Font Awesome 5 support correctly in the new Theme X and Cornerstone is broken.

** Further update - Although it works on Safari, it also doesn’t render on iOS **

The links are generated with the following CSS and HTML.

HTML: In a HTML Widget

CSS:

.icon::before {
font-size:2em;
margin-left:20px;
font-family: FontAwesome !important;
}

.em::before {
content: “\f0e0” !important;
}

.li::before {
content: “\f0e1” !important;
}

[rad]

Hi @p4rd,

Thanks for reaching out.

I checked your site and those icons are coming from custom HTML widget. And your custom CSS are no longer compatible with the latest version of FontAwesome library. The icon code is different for each version of FontAwesome.

Though, I tried applying the latest icon code and it’s not working. And there are active caches, would you mind clearing your caches and test it again. Then please provide your login credentials in a secure note. I like to test the icons from the builder instead of the custom code just to make sure there are no issues with existing icons.

Thanks!

[p4rd]

Hi Rad,

I’ve disabled the Caching function so you should be able to do your stuff.

I’ll send a secure note.

P

[jade]

Hi there,

I have tried accessing your site but it seems to be inaccessible at the moment.

Please update to X 6.2.4 and Cornerstone 3.2.4 as it has some fixes for the FontAwesome icon not properly working.

Let us know how it goes.