webentwicklung-frage-antwort-db.com.de

Bootstrap3 - Glyphicons werden nur in Chrome nicht angezeigt

Seltsamerweise werden in Chrome v31 keine Bootstrap3-Glyphicons angezeigt (zeigt ein kleines Quadrat an). Funktioniert aber gut in FF v26, Opera v18, Safari v5.1 und IE v10. Funktioniert auch gut in Android 4.x - Chrome und FF.

Getestet mit einfachem Code: <span class="glyphicon glyphicon-adjust"></span>

Bitte helfen Vielen Dank im Voraus!

Umgebung: Windows 8.0

google-chromebrowsertwitter-bootstrap-3glyphicons
8
lupchiazoem

Anstatt Ihr Problem zu beheben, lerne ich Sie lieber, 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". Daraufhin wird ein Fenster mit nützlichen Informationen zu HTML und CSS angezeigt.
  2. Wenn es sich um ein Sprite-Bild handelt (wie in Bootstrap 2), sehen Sie sich das CSS auf der rechten Seite an, und suchen Sie nach dem background-image, der am weitesten oben steht (durchgestrichen). Siehe die URL für das Sprite-Bild. Wenn es sich um ein Glyphikon handelt (wie in Bootstrap 3), suchen Sie stattdessen nach dem font-family.
  3. Wechseln 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-halflings-regular.woff). Wenn der Status "304" lautet, wurde er aus dem Cache geladen. Wenn Sie den Cache leeren und die Seite neu laden, wird Ihr Problem möglicherweise behoben.
  5. Wenn es sich nicht um den Status "304" handelt, liegt möglicherweise ein Problem vor, wenn der Webserver das Image nicht bereitstellt ("404" oder einen ähnlichen Status) oder der Server aus irgendeinem Grund nicht ordnungsgemäß angezeigt wird. 
  6. Wenn das Löschen des Caches 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, stimmt wahrscheinlich auch nicht, was Ihr Webserver liefert. 
  7. Wenn das Sprite-Bild korrekt ist, liegt möglicherweise ein Fehler in Ihrem CSS vor, bei dem Sie versehentlich die Hintergrundposition für das Sprite überschreiben. Gehen Sie wieder zur Registerkarte Elemente und sehen Sie sich das generierte CSS an.
30
Paul Tomblin

Ich hatte das gleiche Problem. Die einfachste Lösung besteht darin, das CSS direkt vom Hiperlink zu importieren.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

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

10
Gines Hidalgo

Ich hatte das gleiche Problem wie du:

  1. Gehen Sie in Ihren CSS-Ordner.
  2. Öffnen Sie die bootstrap.min.css-Datei.
  3. Suchen Sie in diesem Text nach Glyphicon-Text.
  4. Sie können die URL-Adresse herausfinden.
  5. Sie sollten den Ordnernamen font in fonts ändern.
  6. Geh und genieße dein Leben. :)
1
mohsen Irani

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

# Protect /Wp-Content/
Order deny,allow
    Deny from all
    <Files ~ ".(xml|css|jpe?g|png|gif|js|svg|pdf|kml|**woff2**)$">
    Allow from all
    </Files>
1
Browsergirl

Es sieht so aus, als wäre dies ein Fehler in WebKit, der hier gemeldet wurde: https://bugs.webkit.org/show_bug.cgi?id=76152

Der Ersteller von GlyphIcons sagt, dass er sich dieses Problems bewusst ist und versucht, in der nächsten Version andere Unicode-Werte zu verwenden, um diesen Fehler zu umgehen: https://Twitter.com/glyphicons/status/423426740128854016

1
Chris Barr

Hinweis für Leser: Lesen Sie @ user2261073s comment und @ Jeffs Antwort bezüglich eines Fehlers im Customizer. Es ist wahrscheinlich die Ursache Ihres Problems.

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

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Wie von Daniel angedeutet, könnte es sich auch um ein Mimetyp-Problem handeln. Die Entwicklertools von Chrome zeigen heruntergeladene Schriftarten auf der Registerkarte "Netzwerk" an:

1
Shiv Singh

Wenn der Font-Antwortheader"Content-Type: text/html; charset = UTF-8"ist, wird der Chrome v38 + das Problem haben, die Bootstrap-Glyphicons anzuzeigen, wenn er als Antwortheader gesetzt wird"Content-Type: application/font-woff"

0
Jack

Es ist meistens ein Problem bei der Bootstrap-Versionierung und ich habe unten die URL hinzugefügt.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"/>
0
mazhar 124

Ich entdeckte, dass bei der Überprüfung des CSS von bootstrap.min.css festgestellt wurde, dass der Verzeichnispfad für "Schriftarten" Leerzeichen hinzugefügt hat. Dies bedeutet, dass Dateien aufgerufen wurden, die nicht vorhanden sind, da die Dateinamen diese Leerzeichen nicht enthalten. Zum Beispiel wurde es durchweg als aufgeführt

../fonts/glyphicons - halblings - regular.eot

wann es hätte sein sollen

../fonts/glyphicons-halflings-regular.eot

Nachdem ich die Leerzeichen gelöscht, das CSS erneut hochgeladen, den Browsercache geleert und erneut geladen hatte (Schaltfläche F5), wurden die Glyphicons schließlich angezeigt. Vor dem Entfernen der zusätzlichen Leerzeichen funktionierte die einzige andere Option für mich die von Gines Hidalgo, der vorschlug, das CSS über einen Hyperlink herunterzuladen. Mit der Entdeckung, dass das Entfernen der zusätzlichen Leerzeichen das Problem behebt, ist diese Option nicht mehr erforderlich.

0
Eric Patterson

Sie müssen den Bootstrap-Zeichensatzordner herunterladen, und in Ihrer bootstrap.min.css-Datei finden Sie einen Pfad wie ../fonts für Glyphicon. Sie müssen diesen Pfad in "fonts /" remove ../ ändern, wenn sich der Zeichensatzordner im selben Ordner befindet bootstarp.min.css.

genießen :)

0
Laxmikant

Stellen Sie sicher, dass Sie in Ihrem Projekt neben js, css Und anderen den Schriftartenordner haben.

Befindet sich der Schriftartenordner im Projekt und der Pfad in der Datei the bootstrap.min.css Ist wie folgt ../fonts/glyphicons, Dh der Schriftartenordner befindet sich nicht im CSS-Ordner, dann funktioniert alles einwandfrei. Danke.

0
Bukenya