一些Bootstrap3 glyphicons没有正确显示在phonegap android webv

发布时间：2020-12-18 00:16:36 所属栏目：安全来源：网络整理

导读：请看看 this attached screenshot。这是我的PhoneGap测试应用程序 – 采用Galaxy S4。您应该看到钟声，书签，公文包和相机图标(和更多)不会按预期显示。这是我的观察：所有图标都可以在PC和移动设备上的浏览器(chrome，safari)中正确显示所有图标都可以

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

您应该看到钟声，书签，公文包和相机图标(和更多)不会按预期显示。

这是我的观察：

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

“问号”只能在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: "d83ddd14";
}
.glyphicon-bookmark:before {
  content: "d83ddd16";
}
.glyphicon-briefcase:before {
  content: "d83ddcbc";
}
.glyphicon-calendar:before {
  content: "d83ddcc5";
}
.glyphicon-camera:before {
  content: "d83ddcf7";
}
.glyphicon-fire:before {
  content: "d83ddd25";
}
.glyphicon-lock:before {
  content: "d83ddd12";
}
.glyphicon-paperclip:before {
  content: "d83ddcce";
}
.glyphicon-pushpin:before {
  content: "d83ddccc";
}
.glyphicon-wrench:before {
  content: "d83ddd27";
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!