Bootstrap 3 glyphicons, die nicht richtig anzeigen

Ich bin mit Bootstrap 3 die glyphicons auf einer website. Es funktioniert in allen Browsern, aber nicht auf bestimmte Geräte wie zeigt es sich als ein Fragezeichen.

Fand ich diesen fix: Einige von Bootstrap3 glyphicons werden nicht korrekt angezeigt, auf der phonegap-android-webview, die behebt das problem auf den Geräten, aber nun ist die glyphicon funktioniert nicht in Firefox. (Ich bin überschreiben der Bootstrap-Standardwerte zu verwenden, die eigentliche, nicht-Escape-Zeichen in meiner CSS.) Ich Frage mich, ob es einen Weg gibt, zu schreiben, jquery-mittels browser-Erkennung für Firefox zu löschen, die überschreiben in meine CSS-Datei und wiederherstellen es zurück zu Bootstrap CSS.

Fand ich dieses jQuery-plugin für die browser-Erkennung: https://github.com/gabceb/jquery-browser-plugin

Code:
JS

if ( $.browser.mozilla ) {
    $('a#calendar span').removeClass('glyphicon-calendar');
    $('a#calendar span').css({'glyphicon-calendar:before': 'content: "\1f4c5"'});
    }

CSS zu überschreiben 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";
}

Danke für Eure Hilfe.

Könnten Sie bitte einen Blick auf meine Antwort auf Bootstrap glyphicon nicht zeigt in Form?

InformationsquelleAutor PDIuserr | 2013-11-27

  1. 6

    Könnte man eine .glyphicon-nonescaped Klasse, damit Sie zum wechseln zwischen Standard-entkommen und nicht-entkommen-Glyphen :

    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');
}
    Dieser funktioniert. Danke!!!

    InformationsquelleAutor zessx

  2. 2

    Die Lösung oben funktioniert gut für verschiedene OS. Sie könnten fügen Sie diesen code in Ihre css Datei und es könnte funktionieren, für nicht-device-codes:

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

    InformationsquelleAutor 1453939

  3. 0

    Zu vermeiden Sie die Verwendung von Javascript, die Sie verwenden können media queries in der CSS statt:

    Für Firefox:

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

    Für IE 8+:

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

    InformationsquelleAutor aloha

Schreibe einen Kommentar