微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

请看看 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: "\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";
}

原文地址:https://www.jb51.cc/bootstrap/234241.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐