Question

请查看this attached screenshot。这是我的PhoneGap测试应用程序 - 采用Galaxy S4。

您应该看到铃声，书签，公文包和相机图标（以及更多）未按预期显示。

以下是我的观察：

所有图标都可以在浏览器（chrome，safari），PC和移动设备上正确显示
所有图标都可以在ios的同一个应用程序中正确显示（在iphone / ipad，ios7中查看）

“问号”只能在Android应用中看到。

有谁知道原因？

Answer 1

转义序列存在问题。如果可以可靠地维护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";
}

Answer 2

可能是因为bootstrap min .css文件和字形文件的版本不匹配。

一些Bootstrap3 glyphicons在phonegap android webview上无法正确显示

2 个答案: