4

Web サイトで Bootstrap 3 のグリフィコンを使用しています。ブラウザ間では正常に機能しますが、疑問符として表示されるため、特定のデバイスでは機能しません。

この修正を見つけました: Bootstrap3 glyphicons の一部が phonegap android webviewで正しく表示されないため、デバイスの問題は修正されますが、Firefox で glyphicon が機能しなくなりました。(CSS で実際のエスケープされていないグリフを使用するように Bootstrap のデフォルトをオーバーライドしています。) 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

/* 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 に答える
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";
       }
}
于 2015-03-23T15:04:34.820 に答える