4

我在网站上使用 Bootstrap 3 的字形图标。它在浏览器中运行良好，但在某些设备上却不能，因为它显示为问号。

我找到了这个修复：一些 Bootstrap3 glyphicons 在 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";
}

谢谢您的帮助。

4

3 回答 3

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');
}
于 2013-11-29T11:08:32.000 回答
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";
}
于 2014-04-10T21:38:20.643 回答
0

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

对于火狐：

@-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";
       }
}
于 2015-03-23T15:04:34.820 回答