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
Labels
-
android (3)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
1 comment:
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;
Post a Comment