New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap v3.1.1: Wrong glyphicons on iPad #13488

Closed
esitarski opened this Issue May 3, 2014 · 23 comments

Comments

Projects
None yet
@esitarski
Copy link

esitarski commented May 3, 2014

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:
ipad


Chrome looks like this:
chrome

@DaSchTour

This comment has been minimized.

Copy link
Contributor

DaSchTour commented May 3, 2014

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.

@esitarski

This comment has been minimized.

Copy link

esitarski commented May 3, 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?

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented May 3, 2014

@esitarski Do the Glyphicons on http://getbootstrap.com/components/ display properly on iPad for you?

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented May 4, 2014

@esitarski Also, could you please confirm that you're using Bootstrap v3.1.1?

@mdo

This comment has been minimized.

Copy link
Member

mdo commented May 4, 2014

This is emoji kicking in, isn't it?

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented May 4, 2014

Yes. Presumably the Glyphicons font is failing to load, most likely due to a server configuration problem (wrong MIME type header?).

@esitarski

This comment has been minimized.

Copy link

esitarski commented May 5, 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.

@hnrch02

This comment has been minimized.

Copy link
Member

hnrch02 commented May 5, 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.

@esitarski

This comment has been minimized.

Copy link

esitarski commented May 5, 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.

@mdo

This comment has been minimized.

Copy link
Member

mdo commented May 8, 2014

Closing as not a Bootstrap bug.

@mdo mdo closed this May 8, 2014

@jamchen

This comment has been minimized.

Copy link

jamchen commented Feb 26, 2016

I encountered same issue and resolved it by removing woff2 font file from @front-face.

@hebbet

This comment has been minimized.

Copy link
Contributor

hebbet commented Feb 26, 2016

@jamchen if that still happens with version 3.3.6 of bootstrap, file a new issue with an example.

@jamchen

This comment has been minimized.

Copy link

jamchen commented Mar 2, 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 <style> tag and it works (probably I should wait for days :P ).

@ConnectedReasoning

This comment has been minimized.

Copy link

ConnectedReasoning commented Apr 24, 2016

I had this issue.

I discovered that my fonts directory was not in the
@font-face{src:url('../fonts/glyphicons-halflings-regular.eot');} path as described in the bootstrap css file. Rather than change my bootstrap css file location I moved my fonts so they would be found in the original bootsrap.css "../fonts" path.

Apparently when glyihicons (and fonts for that matter) are not found in the location described by your css the browser will try to find them where it can.

One thing that can throw you off is that the placement of your bootstrap css could be different to your font path between development and production so mind your font path relative to your css path.

@darrylyoung

This comment has been minimized.

Copy link

darrylyoung commented May 24, 2016

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.

@darrylyoung

This comment has been minimized.

Copy link

darrylyoung commented May 24, 2016

I see that you added a confused response, @DaSchTour. Is there anything I can explain a little better?

@Krknv

This comment has been minimized.

Copy link

Krknv commented Aug 19, 2016

Try to use full path instead of relative - that solves problem for me
@icon-font-path: 'http://sitename.com/fonts/';

@braamvandyk

This comment has been minimized.

Copy link

braamvandyk commented Dec 12, 2016

@darrylyoung You Sir, are a genius. I disabled the content blocker on the user iPad and that was it. Problem = history.

@jerimiahwelch

This comment has been minimized.

Copy link

jerimiahwelch commented Feb 25, 2017

I had the same problem for css on a mobile only amp page. Changing from woff2 to woff helped me.

Changed:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('https://myClientsUrl.com/fonts/glyphicons-halflings-regular.woff2')
}

To:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('https://myClientsUrl.com/fonts/glyphicons-halflings-regular.woff')
}

Did the trick.

@hapticMonkey

This comment has been minimized.

Copy link

hapticMonkey commented Aug 18, 2017

I found that putting the fonts in the same folder with the css and changing the css to reflect not leading "font/" resolved problems on the Android and IOS

@barryp

This comment has been minimized.

Copy link

barryp commented Nov 14, 2017

@braamvandyk if Firefox Focus was the content-blocker you disabled, you can more narrowly disable the blocking of webfonts, but keep the blocking of ad trackers, analytics trackers, etc - in the settings page accessed with the little gear icon in the upper right of the Firefox Focus app.

Thanks @darrylyoung - I thought I was loosing my mind until coming across your fix.

@OverspillPoet

This comment has been minimized.

Copy link

OverspillPoet commented Apr 24, 2018

I had this happen too. The strange thing was I could fix it by copying the fonts folder to the root of the website (i.e. c:\inetpub\wwwroot, This isn't where the fonts folder was located for my application. I tried replacing the relative path in the @font-face setting with the full path. All other browsers were fine, but iPhones and iPads using Safari only showed the correct glyphicons if the fonts folder was in the website root,

Eventually, I realise the glyphicon regular and halflings fonts were installed on the server. I uninstalled them and now Apple devices find the fonts folder on the path specified with @font-face. I've removed the copy from the website root and all devices are happy.

@Oscar-Deng

This comment has been minimized.

Copy link

Oscar-Deng commented May 6, 2018

Happening too, I tried to download the fonts (eot,woff2,woff,ttf,svg) to serverside (/bootstrap/fonts/) and saved bootstrap.min.css in server, then just change the url in css to "url(/bootstrap/fonts/glyphicons-halflings-regular.eot", etc. , everything works fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment