Bootstrap3 - Glyphicons werden nur in Chrome nicht angezeigt

Anstatt Ihr Problem zu beheben, lerne ich Ihnen lieber bei, wie Sie Ihr eigenes Problem beheben können.

1. Klicken Sie mit der rechten Maustaste auf das Element und wählen Sie "Element prüfen". Dadurch wird ein Fenster geöffnet, das Ihnen nützliche Informationen über den HTML-Code und das darauf angewendete CSS anzeigt.
2. Wenn es sich um ein Sprite-Image handelt (wie in Bootstrap 2), sehen Sie sich das CSS auf der rechten Seite an und suchen nach dem obersten (nicht durchgestrichenen) background-image . Siehe die URL für das Sprite-Bild. Wenn es ein Glyphon ist (wie in Bootstrap 3), suche stattdessen nach font-family .
3. Gehen Sie zur Registerkarte "Netzwerk". Möglicherweise müssen Sie die Seite aktualisieren, um nützliche Informationen zu erhalten.
4. Suchen Sie nach dem Ort, an dem das Sprite-Bild oder die Schriftart geladen wurde (z. B. glyphicons-halblings-regulary.woff). Wenn es den Status "304" hat, heißt das, dass es aus dem Cache geladen wurde. In diesem Fall könnte das Problem durch Löschen des Caches und erneutes Laden der Seite behoben werden.
5. Wenn es kein "304" -Status ist, haben Sie möglicherweise ein Problem, wenn der Webserver das Image nicht ausliefert (ein "404" oder ähnlicher Status) oder aus irgendeinem Grund nicht korrekt angezeigt wird.
6. Wenn das Löschen des Cache das Problem nicht gelöst hat, klicken Sie auf der Registerkarte Netzwerk auf die URL für das Sprite-Bild oder die Schriftart, und klicken Sie dann auf die Registerkarte "Vorschau". Was Sie sehen sollten, ist ein Blockbild, das Ihr Symbol und alle anderen Symbole oder die alphanumerischen Zeichen in dieser Schriftart enthält. Wenn dies nicht das ist, was Sie sehen, ist wahrscheinlich auch etwas nicht in Ordnung mit dem, was Ihr Webserver anbietet.
7. Wenn das Sprite-Bild korrekt ist, stimmt wahrscheinlich etwas mit deinem CSS nicht, wo du versehentlich die Hintergrund-Position für das Sprite überschreibst. Gehen Sie zurück zu Ihrem Element-Tab und sehen Sie sich das generierte CSS an.

Ich hatte das gleiche Problem. Die einfachste Lösung ist, das CSS direkt aus dem Hiperlink zu importieren, nicht herunterladen:

Das Problem besteht darin, dass das CSS andere relative Pfade zu anderen Dateien verwendet. Daher können Sie 2 Dinge tun:
1. Laden Sie alle relativen Pfade herunter.
2. Sie können einfach den Hyperlink (einfacher) verwenden.

Es sieht so aus, als wäre dies ein Fehler in WebKit, der hier gemeldet wurde: Ссылка

Auch der Ersteller von GlyphIcons sagt, dass er sich dieses Problems bewusst ist und versuchen wird, in der nächsten Version verschiedene Unicode-Werte zu verwenden, um diesen Fehler zu umgehen: Ссылка

Hinweis für die Leser: Lesen Sie unbedingt @ user2261073 und @ Jeffs Antwort zu einem Bug im Customizer. Es ist wahrscheinlich die Ursache für Ihr Problem.

Die Schriftartdatei wird nicht korrekt geladen. Überprüfen Sie, ob sich die Dateien am erwarteten Speicherort befinden.

Wie von Daniel angezeigt, könnte es sich auch um ein Mime-Type-Problem handeln. Die Chrome-Entwicklungstools zeigen heruntergeladene Schriftarten auf der Registerkarte Netzwerk:

Mein .htaccess in / wp-content verursachte den Fehler aufgrund einer Dateitypeinschränkung. Nachdem ich woff2 zur Liste der erlaubten Dateitypen hinzugefügt habe, funktioniert alles wieder gut.

Wenn der Header der Schriftartantwort "Content-Type: text / html; charset = UTF-8" ist, wird das chrome v38 + Probleme haben, die Bootstrap-Glyphicons anzuzeigen. Es wird aufgelöst, wenn der Response-Header als "Content-Type: application / font-woff"

Sie müssen Bootstrap Schriftarten Ordner herunterladen, und in Ihrer bootstrap.min.css finden Sie Pfad wie .. / fonts für Glyphon, müssen Sie diesen Pfad zu "Fonts /" entfernen ../ wenn Ihr Schriftarten-Ordner ist in derselben bootstarp.min.css.

genießen:)

Wenn es hilft, behebt dieses Problem mit bootstrap.css anstelle von bootstrap.min.css.