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

Question

Please have a look at this attached screenshot. It is my PhoneGap testing app - taken on a Galaxy S4.

You should see that the bell, bookmark, briefcase, and camera icons (and more) are not displayed as expected.

Here are my observations:

1. All icons can be displayed correctly in browsers (chrome, safari), on both PC and mobile devices
2. All icons can be displayed correctly in the same app for ios (checked in iphone/ipad, ios7)

The "question mark" can only be seen in an Android app.

Does anyone know the reason why?

Answer 1

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";
}

Answer 2

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