Icons not cross-browser compatible?

Support
#1

Hi

We have this hidden page http://www.uggerhoej.dk/forside-v2. In Chrome the icons here https://cl.ly/3R1o1X310H3H are showing just fine, but in Safari and Firefox we see this https://cl.ly/2K3T010r0G0n.

Suggestions?

That said I needed to be able to insert the icons using Cornerstone and the Text element… and I didn’t have any shortcode-generator, so instead I setup the icons as regular elements and cloned the generated HTML from the frontend into the Text element.

Thanks

#2

Hi,

You need to add the icon’s unicode.

eg.

<i data-x-icon="&#xf1d7;" class="x-icon x-icon-wechat" style="text-align: center;color: #ffffff;font-size: 30px;background-color: #cc6019;width: 60px;height: 60px;line-height: 60px"></i>

If you notice I added data-x-icon="&#xf1d7;". Please do the same to your other icons.

<i data-x-icon="&#xf005;" class="x-icon x-icon-star" style="text-align: center;color: #ffffff;font-size: 30px;background-color: #cc6019;width: 60px;height: 60px;line-height: 60px"></i>

<i data-x-icon="&#xf00c;" class="x-icon x-icon-check" style="text-align: center;color: #ffffff;font-size: 30px;background-color: #cc6019;width: 60px;height: 60px;line-height: 60px"></i>

You can find your icons unicode on the link below

http://fontawesome.io/cheatsheet/

Hope this helps

#3

Hi

Thanks for the answer. However, I can’t make it work. My HTML is here https://cl.ly/1N1v1U3B3J1j and the frontend is here http://www.uggerhoej.dk/forside-v2. In Firefox it still show https://cl.ly/230u3I3D0V2X.

Suggestions?

#4

Hi There,

Thanks for the confirmation and I can also confirm the issue in chrome also.

Can you please remove the inline style from the icon that you added and re test it. If that doesn’t help please send us your login details to help you on this.

Please post it in a secure note.

THanks

#5

Hi

If I remove the inline styles from the first icon, the we have:

Before: https://cl.ly/053l2q3x1s1K
After: https://cl.ly/050J1d3Z1A2a

… but no change https://cl.ly/3q0b232A300Q

#6

Hi again,

I checked your setup and it looks like a cache issue, it seems like the content is being served by the cache. Clear all caches then deactivate your caching plugins and other optimization plugins. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

Let us know how this goes!

#7

Hi

I don’t know what to say - have a look here http://www.uggerhoej.dk/forside-v2 + https://cl.ly/27453X1S451o. If you can see the 3 dots after “text 1”, then you’re seeing the new version, which i just edited and saved. But icons are still broken https://cl.ly/2H1E3w3q1a32.

#8

Hi again,

I re-created that icon section with Raw Content element and now all seems to be working just fine. Please note that if you have complex HTML then always use Raw Content element. If you have plain text or very simple HTML then use Text element.

You can test the page and delete the Text element from the page, I’ve kept both for you to test. When you delete the Text element the background will resize to the original size.

Cheers!

#9

Hi

That’s great knowledge and great help - works like a charm. Thanks a million!

#10

Great!

Glad that it works!

Thanks

#11

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