我在网站上使用Bootstrap 3的字形图标。它在浏览器之间运行良好,但在某些设备上运行不好,因为它显示为一个问号。
我发现了这个修复:一些Bootstrap3字形图标在phonegap安卓网络视图上没有正确显示,这修复了设备上的问题,但现在字形图标在Firefox中不起作用。(我正在覆盖Bootstrap默认值,以便在我的CSS中使用实际的、未转义的字形。)我想知道是否有一种方法可以使用Firefox的浏览器检测来编写一些jquery,以删除我的CSS文件中的覆盖,并将其恢复为Bootstrap的CSS。
我发现了这个用于浏览器检测的jQuery插件:https://github.com/gabceb/jquery-browser-plugin
代码:
JS-
if ( $.browser.mozilla ) {
$('a#calendar span').removeClass('glyphicon-calendar');
$('a#calendar span').css({'glyphicon-calendar:before': 'content: "1f4c5"'});
}
CSS覆盖引导
/* fix glyph not showing on some devices--override the Bootstrap defaults to use the actual, non-escaped glyphs */
.glyphicon-calendar:before {
content: "d83ddcc5";
}
Bootstrap的CSS
.glyphicon-calendar:before {
content: "1f4c5";
}
谢谢你的帮助。
您可以使用.glyphicon-nonescaped
类,以便在默认转义符和非转义符之间切换:
HTML
<i class="glyphicon glyphicon-calendar glyphicon-nonescaped"></i>
CSS
.glyphicon-nonescaped.glyphicon-calendar:before {
content: "d83ddcc5";
}
jQuery
if($.browser.mozilla) {
$('.glyphicon-nonescaped').removeClass('glyphicon-nonescaped');
}
上述解决方案适用于各种操作系统。您可以将此代码添加到css
文件中,它可能适用于无设备代码的情况:
.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";
}
为了避免使用Javascript,您可以在CSS中使用媒体查询:
对于Firefox:
@-moz-document url-prefix() {
.glyphicon-nonescaped.glyphicon-calendar:before {
content: "d83ddcc5";
}
}
对于IE 8+:
@media screen {
.glyphicon-nonescaped.glyphicon-calendar:before {
content: "d83ddcc5";
}
}