Bootstrap: Bootstrap v3.1.1: Wrong glyphicons on iPad
Apologies if there is a known solution.
The iPad shows different glyphicons (user != camera, barcode != saxofone, tag != guitar, download != clock, x != putting green, checkbox != skis).
On a computer, Chrome, FireFox, Explorer and Safari show the correct glyphicons.
Are the incorrect icons due to an internal iPad configuration?
What needs to be done to remedy this problem?
iPad looks like this:
Chrome looks like this:
esitarski
All 23 comments
This is not an bootstrap error, but an error in wrong CSS handling. You might check how your CSS is included and debug by connection the iPad with a Mac and check it with Safari Developer Tools.
DaSchTour
on 3 May 2014
I don't have an iPad or a Mac. That's why I use Bootstrap - it is my understanding that it supports multi-browser/platform.
The only css included on the page is:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
As you can see from the screen captures, the Bootstrap css is being applied on the iPad exactly the same as on Chrome, FireFox, Safari and Explorer.
Except the iPad glyphicons are wrong. 3-D guitars, saxophones, skis and golf holes are not barcodes, download arrows, tags and checkmarks (I can guarantee that the iPad images are not on my server).
Any ideas how to get bootstrap glyphicons to work on the iPad?
esitarski
on 3 May 2014
@esitarski Do the Glyphicons on http://getbootstrap.com/components/ display properly on iPad for you?
cvrebert
on 3 May 2014
@esitarski Also, could you please confirm that you're using Bootstrap v3.1.1?
cvrebert
on 4 May 2014
This is emoji kicking in, isn't it?
mdo
on 4 May 2014
Yes. Presumably the Glyphicons font is failing to load, most likely due to a server configuration problem (wrong MIME type header?).
cvrebert
on 4 May 2014
Using Bootstrap v3.1.1.
I found a link about fixing wrong-bootstrap-icons by de-installing emoji - see here. That seems like pretty bad behavior of emoji if it intrusively substitutes pictures on web pages.
Apple support explains that emoji may not appear properly on other devices - see here. However, nothing about showing emoji images instead of font chars on web pages.
Can you point me in a direction to check "wrong MIME type header"?
Specifically, how should the server configuration be changed to fix this?
Would it help to post the entire html for the page causing the problem?
If the server configuration is broken/misconfigured, is there an explanation why it works properly on Chrome, FireFox, Explorer and Safari, but not on "Mobile Safari" on the iPad?
My users have not yet got back to me on getting a check for the display of http://getbootstrap.com/components/ on this iPad. I hope to get something soon.
esitarski
on 5 May 2014
On which version(s) of iOS was this tested (I can spot that the first screenshots was taken on >= iOS 7) and were multiple devices affected by this? Also, please share the exact code used in your screenshots or a link to your live page, so we can try to reproduce this, but—as mentioned early—this is most likely a configuration error on your side and not a problem originating from Bootstrap itself.
hnrch02
on 5 May 2014
Unfortunately, I don't have access to the iPad (I can't afford to get a copy of all the versions, browsers and machines that people might run the software on).
If it was a server error and the fonts could not be found, I can't see why it would work on any browser. Does anyone have a specific server configuration in mind?
I also found this.
According to the above, the incorrect behavior may be a symptom of Mobile Safari's caching bug. The effect is that causes displays the previously cache icons on new web pages. Clearing the CSS cache is described to fix the problem (well, at least until the user switches to another page and the font icons are wrong for that page).
That seems to explain the facts.
I will ask my users to clear their CSS cache on the iPad as that is described to fix the problem. If so, Apple's got some work to do.
esitarski
on 5 May 2014
Closing as not a Bootstrap bug.
mdo
on 8 May 2014
I encountered same issue and resolved it by removing woff2 font file from @front-face.
jamchen
on 26 Feb 2016
@jamchen if that still happens with version 3.3.6 of bootstrap, file a new issue with an example.
hebbet
on 26 Feb 2016
Just for a record, I commented on this thread is not because it's an issue of Bootstrap. It's because this is on top of google search results while search this issue and I thought it will help someone like me who encounter similar problem. I can remove my comments if it leading to something unexpected or confusing. Totally understand, :)
Anyway, my fix turns out not working. I thought it worked just because it worked for a while.
According to , I moved the @font-face declaration out of SASS to html
Most helpful comment
While this might not apply to most people, it's worth noting that this kind of thing – seeing awkward-looking emoji in place of your expected icons – can be a result of a user blocking web fonts with an iOS 9 _Content Blocker_. We just had this issue ourselves and I managed to reproduce it by downloading Focus (by Mozilla) and enabling the blocking of web fonts. When a font like this can't be downloaded, it appears that iOS replaces the usage with built-in emoji (a clock, in our case).
We can't force people not to enable such settings but we can certainly help ourselves here by doing things like base64-encoding fonts and storing them in local storage and having a network request (that could potentially be blocked) as the fallback if there's nothing in local storage or if the user's browser doesn't support it.
Anyway, I know this issue is closed and that this won't have caused the issue mentioned here (as iOS 9 wasn't released in May 2014) but I wanted to share my experience with fonts not loading and having iOS fall back to using emoji.