Friday, October 23, 2015

Glyphicons showing up as Emoji in Safari

With the latest version of Safari 9 (iOS 9.1), I encountered a problem with Glyphicons (with bootstrap 3.3.5) showing up as Emoji.

It only happens intermittently when offline using an appcache.

Meanwhile, I also had Font Awesome Icons on the same page which were working fine.

I found a few Stack Overflow posts
How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?
How to prevent Bootstrap's glyphicon rendering to emoji (Opera, FF)?

and a closed bootstrap bug
Bootstrap v3.1.1: Wrong glyphicons on iPad 

But none of them had any solution which worked, but then doing some further research, I then discovered that Bootstrap v4 is dropping Glyphicons

So, the solution I'm using is to get ready for Bootstrap v4 and just dump Glyphicons entirely

UPDATE: Turns out it was a PBKAC, I didn't have a .woff entry in the appache manifest, as glorious IE6 (Safari) doesn't support woff2 yet

1 comment:

Roman said...

Here is the my solution: In _variables.scss (or css) find the line with icon font path:

$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../../fonts/bootstrap/") !default;

In my case, the problem was in the wrong path to fonts/bootstrap (the glyphicons are here). To fix the problem just remove one "../" from there. Your code should be something like this:

$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;