Some of Bootstrap3 glyphicons are not displayed correctly on phonegap android webview Some of Bootstrap3 glyphicons are not displayed correctly on phonegap android webview android android

Some of Bootstrap3 glyphicons are not displayed correctly on phonegap android webview


It's a problem with the escape sequences. If you can reliably maintain a UTF-8 encoded CSS file, you could override the Bootstrap defaults to use the actual, non-escaped glyphs.

(Depending on your browser, the following code will appear to contain a bunch of boxes. Copying the code and pasting it into a UTF-8 document should preserve the values, though.)

@charset "UTF-8";.glyphicon-bell:before {  content: "🔔";}.glyphicon-bookmark:before {  content: "🔖";}.glyphicon-briefcase:before {  content: "💼";}.glyphicon-calendar:before {  content: "📅";}.glyphicon-camera:before {  content: "📷";}.glyphicon-fire:before {  content: "🔥";}.glyphicon-lock:before {  content: "🔒";}.glyphicon-paperclip:before {  content: "📎";}.glyphicon-pushpin:before {  content: "📌";}.glyphicon-wrench:before {  content: "🔧";}

You can also change the escape sequences to workaround this problem, but browser support varies. If you're only targeting Android/BlackBerry, the following should work fine:

.glyphicon-bell:before {  content: "\d83d\dd14";}.glyphicon-bookmark:before {  content: "\d83d\dd16";}.glyphicon-briefcase:before {  content: "\d83d\dcbc";}.glyphicon-calendar:before {  content: "\d83d\dcc5";}.glyphicon-camera:before {  content: "\d83d\dcf7";}.glyphicon-fire:before {  content: "\d83d\dd25";}.glyphicon-lock:before {  content: "\d83d\dd12";}.glyphicon-paperclip:before {  content: "\d83d\dcce";}.glyphicon-pushpin:before {  content: "\d83d\dccc";}.glyphicon-wrench:before {  content: "\d83d\dd27";}


It could be because of mismatch between version of bootstrap min .css file and glyph files.