twitter-bootstrap – Bootstrap 3 glyphicons无法正确显示

发布时间：2020-12-17 20:37:36 所属栏目：安全来源：网络整理

导读：我在网站上使用Bootstrap 3的字形.它在浏览器中工作正常,但在某些设备上没有,因为它显示为问号. 我找到了这个修复：Some of Bootstrap3 glyphicons are not displayed correctly on phonegap android webview修复了设备上的问题,但现在glyphicon在Firefox中

我在网站上使用Bootstrap 3的字形.它在浏览器中工作正常,但在某些设备上没有,因为它显示为问号.

我找到了这个修复：Some of Bootstrap3 glyphicons are not displayed correctly on phonegap android webview修复了设备上的问题,但现在glyphicon在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覆盖Bootstrap

/* 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');
}

（编辑：李大同）

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