twitter-bootstrap 某些 Bootstrap3 字形在 phonegap android webview 上无法正确显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19417040/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Some of Bootstrap3 glyphicons are not displayed correctly on phonegap android webview
提问by Liu Xiaolu
Please have a look at this attached screenshot. It is my PhoneGap testing app - taken on a Galaxy S4.
请看看这个附加的截图。这是我的 PhoneGap 测试应用程序 - 在 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)
- 所有图标都可以在 PC 和移动设备上的浏览器（chrome、safari）中正确显示
- 所有图标都可以在 ios 的同一个应用程序中正确显示（在 iphone/ipad、ios7 中检查）
The "question mark" can only be seen in an Android app.
“问号”只能在 Android 应用程序中看到。
Does anyone know the reason why?
有谁知道原因？
回答by Joe Liversedge
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.
这是转义序列的问题。如果您可以可靠地维护 UTF-8 编码的 CSS 文件，则可以覆盖 Bootstrap 默认设置以使用实际的、非转义的字形。
(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.)
（根据您的浏览器，以下代码似乎包含一堆框。不过，复制代码并将其粘贴到 UTF-8 文档中应该会保留这些值。）
@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:
您还可以更改转义序列来解决此问题，但浏览器支持各不相同。如果您只针对 Android/黑莓，以下应该可以正常工作：
.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";
}
回答by Pushpendra
It could be because of mismatch between version of bootstrap min .css file and glyph files.
这可能是因为 bootstrap min .css 文件和字形文件的版本不匹配。
