请查看this attached screenshot . 这是我的 PhoneGap 测试应用 - 在 Galaxy S4 上拍摄。
您应该会看到铃铛、书签、公文包和相机图标(以及更多)未按预期显示。
以下是我的观察:
- 所有图标均可在 PC 和移动设备上的浏览器(chrome、safari)中正确显示
- 所有图标都可以在同一个iOS应用中正确显示(在iphone/ipad、ios7中 checkin )
“问号”只能在 Android 应用中看到。
有人知道原因吗?
最佳答案
这是转义序列的问题。如果您能够可靠地维护一个 UTF-8 编码的 CSS 文件,您可以覆盖 Bootstrap 默认值以使用实际的、非转义字形。
(根据您的浏览器,以下代码似乎包含一堆框。但是,复制代码并将其粘贴到 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: "🔧";
}
您也可以更改转义序列来解决此问题,但浏览器支持会有所不同。如果您只针对 Android/BlackBerry,以下应该可以正常工作:
.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";
}
关于android - 某些 Bootstrap3 字形图标在 phonegap android webview 上未正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19417040/