Skip to content
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

Wrong font icons on some devices #10106

Closed
Tomas-M opened this Issue Aug 24, 2013 · 47 comments

Comments

Projects
None yet
8 participants
@Tomas-M
Copy link

Tomas-M commented Aug 24, 2013

The glyph font icons are somehow broken on some devices. For example on my android phone (android 2.1) some of the icons are broken, but others look OK. See attached screenshot.

I'm not sure what is cause of that, yet if it is possible to show some of the icons properly on my device, it should be possible to fix it to show all of them properly. If you need more information, let me know. Thank you.

screenshot_2013-08-24_1536

@juthilo

This comment has been minimized.

Copy link
Member

juthilo commented Aug 24, 2013

Possibly related: #9794.
Is your screenshot from the official docs at getbootstrap.com ? Could you perhaps try emptying your cache?

@Tomas-M

This comment has been minimized.

Copy link
Author

Tomas-M commented Aug 24, 2013

Yes, it is from the official docs at getbootstrap.com. I've emptied the cache before reporting the problem indeed, it didn't help.

@juthilo

This comment has been minimized.

Copy link
Member

juthilo commented Aug 24, 2013

Huh. Could you try this link and report back whether you see any icons in the Result frame (bottom right)? http://jsfiddle.net/tW57G/ Thanks!

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Aug 24, 2013

From the screenshot, it looks like potentially the same affected set of icons that our CSS had the wrong codepoints for before we fixed that problem...

@Tomas-M

This comment has been minimized.

Copy link
Author

Tomas-M commented Aug 25, 2013

See attached screenshot of the jsfiddle page on my android 2.1 phone (it is in the official browser), the icons are just squares. It may be indeed a problem of the android phone's browser, but then I have no explanation why other icons are properly displayed on the same phone.

screenshot_2013-08-25_0657

@RyanJMcGowan

This comment has been minimized.

Copy link

RyanJMcGowan commented Aug 25, 2013

Confirm I get the same result on JSFiddle as the above screenshot on 2.3.3
It affects only the following glyphicons:
-bell
-bookmark
-briefcase
-calendar
-camera
-fire
-lock
-paperclip
-pushpin
-wrench

@juthilo

This comment has been minimized.

Copy link
Member

juthilo commented Aug 25, 2013

Those are the exact same ones mentioned in #9794. We (thought we) fixed that problem via #9808, so this may be a problem on the browser's side.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Aug 25, 2013

@juthilo

This comment has been minimized.

Copy link
Member

juthilo commented Aug 25, 2013

That would certainly explain why the problem only occurs on older browsers. If this is indeed related to the WebKit bug, is there anything @jankovarik could do about it? (I myself am not at all educated about how web fonts work.)

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Aug 25, 2013

If the linked bug is indeed the cause, then we could edit the icon font so that all the codepoints used fall within the BMP, thus avoiding that WebKit bug. However, semantically correct codepoints might not be available within the BMP for all icons.
Perhaps we should escalate this issue to the author of Glyphicons.

@jankovarik

This comment has been minimized.

Copy link

jankovarik commented Aug 25, 2013

Hey guys, I'm not good at these "code" things and all HTML/CSS code that I'm providing along with GLYPHICONS PRO is done by my friend (he is experienced coder).

I'm not sure if this is going to help, but you can try to open this link: http://jankovarik.net/test/ on the Android device you've mentioned above and maybe you'll find something useful in its CSS code (you're free to use any part of this code).

If this is not going to help, I'll try to find some solution for this during next GLYPHICONS update.

@Tomas-M

This comment has been minimized.

Copy link
Author

Tomas-M commented Aug 26, 2013

The issue is there only with few icons, so moving them to different codes (which are supported even by the broken webkit) seems as a reasonable solution to me. I understand this is a problem of old webkit bug, not the font. But I would suggest to "fix" the font so it works even on broken webkits :)

Attached is screenshot of the above mentioned URL http://jankovarik.net/test/

screenshot_2013-08-26_0841

Old buggy webkit on my android phone can't render fonts of these icons:

lock
bookmark
camera
fire
bell
paperclip
wrench
pushpin
calendar
briefcase

@jankovarik

This comment has been minimized.

Copy link

jankovarik commented Aug 26, 2013

@Tomas-M I see, thanks for getting back to me - I'll try to take a closer look on this issue during next update. Please send me your email on: glyphicons@gmail.com and I'll reach you as soon as the new version is out.

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Aug 27, 2013

Closing as a Glyphicons issue.

@zeroasterisk

This comment has been minimized.

Copy link

zeroasterisk commented Sep 5, 2013

I am also running into this when utilizing bootstrap3 on PhoneGap, rendering via older webkit on android... I tried guessing some unicode characters to move to... but they didn't seem to play nice either...

Are you planning on an update to this? (I've emailed "glyphicon@gmail.com " as suggested above)

@jankovarik

This comment has been minimized.

Copy link

jankovarik commented Sep 5, 2013

@zeroasterisk Please send me your email address on: glyphicons@gmail.com (with "s" in the end) and I'll get back to you as soon as I have the updated version.

@adaptabi

This comment has been minimized.

Copy link

adaptabi commented Sep 14, 2013

To make this easier I have added screencasts with all the doomed glyphs
1
2
3
4
5
6
7

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Sep 15, 2013

@jankovarik The fix would be to either alias or move all the Glyphicon Halflings icons currently at Unicode codepoints greater than U+FFFF, to codepoints ≤ U+FFFF. (Which is to say, to move them so that they fall within the Unicode Basic Multilingual Plane (BMP)). See the comments earlier in this thread for a list of affected icons.

@jankovarik

This comment has been minimized.

Copy link

jankovarik commented Sep 16, 2013

Guys, I've made some changes and here are updated files (just temporary, tested on Android 2.3.6):

[updated link in post below]

sc20130916-124310

INFO: these symbols should have to have its own unique unicode codes in UTF based on their names, this is why was GlyphsApp forcing me to assign these UTF codes, so I had to renamed them. Here is a list of changes from GLYPHICONS Halflings, all you have to do is to replace font files (please backup first) and replace these UTF codes in your CSS file:

lock - E033
bookmark - E044
camera - E046
fire - E104
bell - E123
wrench - E136
briefcase - E139
paperclip - E142
pushpin - E146

Hope it helped.

@adaptabi

This comment has been minimized.

Copy link

adaptabi commented Sep 16, 2013

Hi there,

Thanks for the quick update! This looks great on my Android 2.3.5 and 4.0
and 4.1 devices.
Can you please upload the fonts back to twitter bootstrap?

Thank you!

Best Regards,
Laurenţiu Macovei
DotNetWise http://www.dotnetwise.com

On Mon, Sep 16, 2013 at 3:30 PM, jankovarik notifications@github.comwrote:

Guys, I've made some changes and here are updated files (just temporary,
tested on Android 2.3.6): http://glyphicons.com/files/android.zip

[image: sc20130916-124310]https://f.cloud.github.com/assets/1397428/1148722/5de200be-1ecb-11e3-876f-fa97028d8ff9.png

[image: screen shot 2013-09-16 at 11 14 19 am]https://f.cloud.github.com/assets/1397428/1148717/4b4d8ed2-1ecb-11e3-8c90-cc9f8debb599.png

INFO: these symbols should have to have its own unique unicode codes in
UTF based on their names, this is why was GlyphsApp forcing me to assign
these UTF codes, so I had to renamed them. Here is a list of changes from
GLYPHICONS Halflings, all you have to do is to replace font files (please
backup first) and replace these UTF codes in your CSS file:

lock - E033
bookmark - E044
camera - E046
fire - E104
bell - E123
wrench - E136
briefcase - E139
paperclip - E142
pushpin - E146

Hope it helped.


Reply to this email directly or view it on GitHubhttps://github.com//issues/10106#issuecomment-24506097
.

@jankovarik

This comment has been minimized.

Copy link

jankovarik commented Sep 16, 2013

@dotnetwise I really do not know why exactly have older Android browser this problem, but I think that original (current) names of the symbols and their unicode codes in Bootstrap are correct as they are. I'm not sure if it's good idea to replace original font with this "fix" directly in Bootstrap (moreover: I can't make this by my own). But as I said above, you're free to use these files in case you need to support older devices.

@zeroasterisk

This comment has been minimized.

Copy link

zeroasterisk commented Sep 16, 2013

Replacing the unicode characters should be a transparent change... all of
the other font icon sets out there are pretty much unicode character
agnostic, and in fact let you edit the characters yourself, eg:
http://fontello.com/

I agree that the class names should remain the same, I don't forsee any
issues there, but changing which character represents that class "under the
hood" makes sense here, since some browsers (old android webkit) wont
support some of the unicode characters currently employed.

... regardless, thanks for coming up with the alternative dataset.

Thanks,
-alan

On Mon, Sep 16, 2013 at 9:33 AM, jankovarik notifications@github.comwrote:

@dotnetwise https://github.com/dotnetwise I really do not know why
exactly have older Android browser this problem, but I think that original
(current) names of the symbols and their unicode codes in Bootstrap are
correct as they are. I'm not sure if it's good idea to replace original
font with this "fix" directly in Bootstrap (moreover: I can't make this by
my own). But as I said above, you're free to use these files in case you
need to support older devices.


Reply to this email directly or view it on GitHubhttps://github.com//issues/10106#issuecomment-24509404
.

@jankovarik

This comment has been minimized.

Copy link

jankovarik commented Sep 16, 2013

@zeroasterisk you could (and you still can) replace any UTF code that you need by yourself, there is no limitation in this direction in Bootstrap license. I've just spent time today in order to find what's exactly wrong, but I couldn't find anything so I made this alternate version, because I wanted to help you somehow.

I've just sent the link to the updated files to the Twitter Bootstrap. It's not in my competence to make this change anyway.

Hope you're understand guys.

@Tomas-M

This comment has been minimized.

Copy link
Author

Tomas-M commented Sep 16, 2013

Hm, since this issue (ticket) is closed, I'm unsure if the fix gets propagated to twitter bootstrap :(

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Sep 16, 2013

Oh ye of little faith.

@jankovarik

This comment has been minimized.

Copy link

jankovarik commented Sep 16, 2013

@cvrebert I forgot this symbol :/ It is still broken on Android? (I'm sorry, but I do not have any device with Android here at the moment).

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Sep 16, 2013

@jankovarik Yes, it's the last remaining one.

@jankovarik

This comment has been minimized.

Copy link

jankovarik commented Sep 16, 2013

@cvrebert /cc @mdo

My apology, here is version with all updated icons: https://www.dropbox.com/s/clh9y6lqtmj01l8/halflings_updated_for_android.zip

Once again list of all affected symbols:

lock - E033
bookmark - E044
camera - E046
fire - E104
bell - E123
wrench - E136
briefcase - E139
paperclip - E142
pushpin - E146
calendar - E109

@adaptabi

This comment has been minimized.

Copy link

adaptabi commented Sep 19, 2013

@mdo Any luck with this small but affecting change?
Thanks!

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Sep 19, 2013

Has anyone happened to have figured out what version of Android the underlying WebKit CSS bug was fixed in?

@RyanJMcGowan

This comment has been minimized.

Copy link

RyanJMcGowan commented Sep 19, 2013

I have 2.3.3. and all icons work for me with the new set.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Sep 19, 2013

@RyanJMcGowan "The new set" = the ones at the link jankovarik posted?

@adaptabi

This comment has been minimized.

Copy link

adaptabi commented Sep 19, 2013

Icons do work, but the css classes are halflings and not bootstrap glyphicons, so they need to be merged

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Sep 19, 2013

Folks, my question was if anyone knew when Android fixed the bug that prevents the original version of Glyphicons from working.
It is nice to hear confirmation that @jankovarik's workaround works though.

@adaptabi

This comment has been minimized.

Copy link

adaptabi commented Sep 19, 2013

They haven't fixed it! (at least for the romanian special UTF-8 characters) https://code.google.com/p/android/issues/detail?id=9808

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Sep 19, 2013

@dotnetwise That's an unrelated bug. Did you even read the StackOverflow link I posted? Please read more carefully so you don't spread disinformation.

@RyanJMcGowan

This comment has been minimized.

Copy link

RyanJMcGowan commented Sep 19, 2013

@cvrebert Yes, the revised glyphicons from his link.

@Tomas-M

This comment has been minimized.

Copy link
Author

Tomas-M commented Sep 19, 2013

Tested the original bug in Android 2.3.4 - AppleWebKit/533.1, as sent in USER_AGENT by the browser in the phone, and the webkit bug is there.

Tested the original bug on Android 4.0.3, AppleWebkit/534.30, as sent in USER_AGENT by the browser in the phone, and the webkit bug is there too, but looks differently, see screenshot:

screenshot_2013-09-19-13-22-13

@adaptabi

This comment has been minimized.

Copy link

adaptabi commented Sep 19, 2013

@cvrebert So is there any plan o apply the new font / unicode chars soon on bootstrap as well? Or what are we waiting for?

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Sep 19, 2013

Well, changing the codepoints is technically backwards-incompatible if anyone was using them directly, so the core dev team needs to decide how handle that. But there's no obstacle to drafting a pull request to update the code itself.

@adaptabi

This comment has been minimized.

Copy link

adaptabi commented Sep 19, 2013

Really not sure how to do that. These halfings codes look totally different than bootstrap ones, even class names are different.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Sep 19, 2013

No one said you had to be the one to do it. I plan to write the patch soon, so don't worry your pretty little head over it.

cvrebert added a commit that referenced this issue Sep 24, 2013

Update Glyphicons font to resolve #10106
Workaround an old Android WebKit bug by switching to codepoints within the BMP.
Details: http://stackoverflow.com/questions/9241519/webkit-css-content-unicode-bug
Extra special thanks to @jankovarik for doing this update. <3
Source: https://www.dropbox.com/s/clh9y6lqtmj01l8/halflings_updated_for_android.zip
(As posted in #10106 (comment) )
@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Sep 24, 2013

Testers would be appreciated over at pull request #10778.

@adaptabi

This comment has been minimized.

Copy link

adaptabi commented Oct 21, 2013

So when is this going to be applied on the master branch & live bootstrap site?

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 21, 2013

dotnet person: Had you read the issue I linked to, you'd know that this has already been fixed in master.
As per usual, getbootstrap.com will be updated when v3.0.1 is released (pretty soon).

@jankovarik

This comment has been minimized.

Copy link

jankovarik commented Jan 29, 2014

Hi again Tomas,

I just wanted to let you know, that I've finished minor update 1.8.1 as I promised earlier.

If you want to download this update, please, use your download link for version 1.8!

Some of the icons were not appearing in some browsers, because their UFT codes (they were valid though). I'm still not sure why exactly is not possible to use these specific codes, but the important thing is that now it is working almost everywhere..

I've also added list of affected icons in _changelog.txt.

Let me know if there is anything else I can do for you

Jan Kovařík

www.jankovarik.net
www.glyphicons.com

On 26 Aug 2013, at 09:07, Tomas-M notifications@github.com wrote:

The issue is there only with few icons, so moving them to different codes (which are supported even by the broken webkit) seems as a reasonable solution to me. I understand this is a problem of old webkit bug, not the font. But I would suggest to "fix" the font so it works even on broken webkits :)

Attached is screenshot of the above mentioned URL http://jankovarik.net/test/

Old buggy webkit on my android phone can't render fonts of these icons:

lock
bookmark
camera
fire
bell
paperclip
wrench
pushpin
calendar
briefcase


Reply to this email directly or view it on GitHub.

@twbs twbs locked and limited conversation to collaborators Jun 14, 2014

@cvrebert cvrebert added this to the v3.0.1 milestone Dec 8, 2014

wilsaj added a commit to wilsaj/bootstrap that referenced this issue Apr 26, 2015

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.