twitter-bootstrap Bootstrap 3 字形显示不正确
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20247529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 glyphicons not displaying correctly
提问by PDIuserr
I am using Bootstrap 3's glyphicons on a website. It works fine across browsers but not on certain devices as it shows up as a question mark.
我在网站上使用 Bootstrap 3 的字形。它在浏览器上运行良好，但在某些设备上运行良好，因为它显示为问号。
I found this fix: Some of Bootstrap3 glyphicons are not displayed correctly on phonegap android webviewwhich fixes the problem on the devices but now the glyphicon is not working in Firefox. (I am overriding the Bootstrap defaults to use the actual, non-escaped glyphs in my CSS.) I was wondering if there is a way to write some jquery using a browser detection for Firefox to remove the override in my CSS file and revert it back to Bootstrap's CSS.
我找到了这个修复：一些 Bootstrap3 glyphicons 在 phonegap android webview 上没有正确显示，它修复了设备上的问题，但现在 glyphicon 在 Firefox 中不起作用。（我正在覆盖 Bootstrap 默认设置以在我的 CSS 中使用实际的、非转义的字形。）我想知道是否有办法使用 Firefox 的浏览器检测来编写一些 jquery 以删除我的 CSS 文件中的覆盖并恢复它回到 Bootstrap 的 CSS。
I found this jQuery plugin for browser detection: https://github.com/gabceb/jquery-browser-plugin
我找到了这个用于浏览器检测的 jQuery 插件：https: //github.com/gabceb/jquery-browser-plugin
Code:
JS
代码：
JS
if ( $.browser.mozilla ) {
$('a#calendar span').removeClass('glyphicon-calendar');
$('a#calendar span').css({'glyphicon-calendar:before': 'content: "f4c5"'});
}
CSS to override Bootstrap
CSS 覆盖 Bootstrap
/* fix glyph not showing on some devices--override the Bootstrap defaults to use the actual, non-escaped glyphs */
.glyphicon-calendar:before {
content: "\d83d\dcc5";
}
Bootstrap's CSS
Bootstrap 的 CSS
.glyphicon-calendar:before {
content: "f4c5";
}
Thank you for your help.
谢谢您的帮助。
回答by zessx
You could use a .glyphicon-nonescapedclass, to allow you to switch between default escaped and non-escaped glyphs :
您可以使用一个.glyphicon-nonescaped类，以允许您在默认转义和非转义字形之间切换：
HTML
HTML
<i class="glyphicon glyphicon-calendar glyphicon-nonescaped"></i>
CSS
CSS
.glyphicon-nonescaped.glyphicon-calendar:before {
content: "\d83d\dcc5";
}
jQuery
jQuery
if($.browser.mozilla) {
$('.glyphicon-nonescaped').removeClass('glyphicon-nonescaped');
}
回答by 1453939
The solution above works great for various OS. You might add this code to your cssfile and it might work for no-device codes:
上述解决方案适用于各种操作系统。您可以将此代码添加到您的css文件中，它可能适用于无设备代码：
.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";
}
回答by aloha
To avoid using Javascript, you can use media queries in the CSS instead:
为了避免使用 Javascript，您可以在 CSS 中使用媒体查询：
For Firefox:
对于火狐：
@-moz-document url-prefix() {
.glyphicon-nonescaped.glyphicon-calendar:before {
content: "\d83d\dcc5";
}
}
For IE 8+:
对于IE 8+：
@media screen##代码## {
.glyphicon-nonescaped.glyphicon-calendar:before {
content: "\d83d\dcc5";
}
}
