Bootstrap 3图标显示不正确

Question

我在网站上使用Bootstrap 3的图标字体，虽然在大多数浏览器上都能正常显示，但在某些设备上却显示为问号。我找到了这个解决方法：Some of Bootstrap3 glyphicons are not displayed correctly on phonegap android webview，可以解决设备上的问题，但现在在Firefox中，图标字体无法正常工作。（我正在覆盖Bootstrap默认设置，使用CSS中实际的、非转义的字形）。我想知道是否有一种方法，可以使用Firefox的浏览器检测来删除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"'});
    }

覆盖Bootstrap的CSS

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

感谢您的帮助。

- PDIuserr

---

你能否请看一下我的回答：Bootstrap glyphicon not showing in Form？ - Murat Yıldız

Answer 1

你可以使用 .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');
}

- zessx

Answer 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";
}

- 1453939

Answer 3

为了避免使用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";
       }
}

- aloha