Bootstrap 3 glyphicons无法正确显示

时间:2013-11-27 16:15:08

标签: twitter-bootstrap twitter-bootstrap-3 glyphicons

我在网站上使用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: "\d83d\dcc5";
  }

Bootstrap的CSS

.glyphicon-calendar:before {
content: "\1f4c5";
}

感谢您的帮助。

3 个答案:

答案 0 :(得分:6)

您可以使用.glyphicon-nonescaped类,以便在默认的转义和非转义字形之间切换:

HTML

<i class="glyphicon glyphicon-calendar glyphicon-nonescaped"></i>

CSS

.glyphicon-nonescaped.glyphicon-calendar:before { 
    content: "\d83d\dcc5";
}

的jQuery

if($.browser.mozilla) {
    $('.glyphicon-nonescaped').removeClass('glyphicon-nonescaped');
}

答案 1 :(得分:2)

上述解决方案适用于各种操作系统。您可以将此代码添加到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";
}

答案 2 :(得分:0)

为避免使用Javascript,您可以在CSS中使用媒体查询:

对于 Firefox:

@-moz-document url-prefix() { 
         .glyphicon-nonescaped.glyphicon-calendar:before {
             content: "\d83d\dcc5";
         }
    }

对于 IE 8 +:

@media screen\0 { 
       .glyphicon-nonescaped.glyphicon-calendar:before {
           content: "\d83d\dcc5";
       }
}