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

android, cordova, glyphicons, twitter-bootstrap, twitter-bootstrap-3

Solution

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

Problem

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: - All icons can be displayed correctly in browsers (chrome, safari), on both PC and mobile devices - 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?

Original source