Wrong Icons Showing up in iOS devices

[Gary Byrd]

Is anyone else having issues with the latest IcoMoon glyphs showing up as goofy emoji icons on iPhone and iPad?

Gary

[Keyamoon]

Are you using the PUA encoding? Any live page to look at? icomoon.io is using icon fonts and all the icons show up properly in iOS and Android.

[ri...@moc.net]

I have the same issue. On iPhone 4, some icons show up as emoticons instead. Different icons in Safari and Chrome. I use PUA encoding and css pseudo-elements.

Did you find a solution?

/Rikke

[Keyamoon]

If your font fails to load, the OS will fall back to using those shapes. There can be many reasons for your font not loading. Are you seeing this problem in the package generated by the IcoMoon app?

[nel...@pxlgk.com]

I figured out why the iPhone pulls in emojis instead of the WebIcon from the Icomoon package.

Last Friday I pushed a page live and also updated the fonts package onto my web server. When viewing it live, the 3 new icons i created did not show up. I had to clear my cache for the CSS and fonts files to update on my browser for it to work.

Then, a co-worker showed me the same page on her iPhone. The new icons i published were replaced with a martini glass, cake, and a fork/spoon icon.

After clearing her iOS Safari's cache, the icons loaded.

TL;DR - iPhone will pull in emoji icons if it cannot find the icon associated with that CSS class name.

Question for Keyamoon - is there anyway to make a fall back icon if one doesn't load? Example, giving a span two icon class names. If the first doesn't load, the second will surely load since it is older and already in the cache.

[bobmm...@gmail.com]

I have the same problem. But not on all my projects..
This one shows properly on my iPhone:

www.bmuller.nl/oldfolio/10

But on this one it shows the emoticons:

www.bmuller.nl/nieuw

[Keyamoon]

Do you see this problem in the generated index.html file too? If not, then you most likely have some caching issue.

[bobmm...@gmail.com]

I cant see the problem in the index.html

I also cleared my iOS Safari's cache, but the icons didn't loaded..

[Keyamoon]

Your font doesn't even load in Chrome. Check your Chrome console and you'll see 404 errors, which means your CSS doesn't point to the right path; or you didn't upload the fonts in the right path.

[bobmm...@gmail.com]

Ah! I found the problem in my CSS.

Thnks for the help!!

[michael...@me.com]

Hello! what was the fix. having the same issue.