Bootstrap3中的一些图标在PhoneGap Android WebView上无法正确显示。

Question

请查看这张附带的屏幕截图，它是我的PhoneGap测试应用程序-在Galaxy S4上拍摄的。您应该可以看到铃铛、书签、公文包和相机图标（以及更多）未按预期显示。

以下是我的观察结果：

1. 所有图标都可以在PC和移动设备的浏览器（chrome、safari）中正确显示。
2. 所有图标都可以在ios同一应用程序中正确显示（在iphone/ipad, ios7中检查）。

“问号”只能在Android应用程序中看到。有人知道原因吗？

- Liu Xiaolu

---

我在我的GS3上也遇到了同样的问题。除了选择不同的图标外，我还没有找到解决办法。 - Dom

我在Firefox和Chrome中显示问号的问题也一样。 - devasia2112

我在这里遇到了一个类似（但不完全相同）的问题，使用桌面版Chrome 34。我正在使用一个包含Bootstrap 3.0.0的脚手架MVC5应用程序，将Bootstrap NuGet包升级到3.1.1解决了我的问题。 - Jeroen

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

- Joe Liversedge

---

你的第一部分完美地运行了!!! 谢谢。使用第二部分在Chrome中仍然会将“相机”图标显示为“问号”。 - Liu Xiaolu

我修复了 .glyphicon-camera 的 CSS 错误。感谢您的反馈！ - Joe Liversedge

谢谢，运行得很好。 - TechCare99

我在Chrome 32.0.1700.76 m上遇到了这个问题。 - Vincent

也适用于32.0.1700.102 m。 - Vincent

Answer 2

可能是由于 bootstrap min .css 文件版本与 glyph 文件不匹配导致的。

- Pushpendra