Bootstrap3 - Glyphicons werden nicht angezeigt in Chrome, nur

Seltsam, keiner von Bootstrap3 glyphicons sind anzeigen in Chrome v31(zeigt ein kleines Quadrat). Aber, funktioniert einwandfrei in FF v26, Opera v18, Safari v5.1 und IE v10. Außerdem funktioniert in Android 4.x - Chrome und FF.

Getestet mit dem einfachen code: <span class="glyphicon glyphicon-adjust"></span>

Bitte helfen. Vielen Dank im Voraus!

Umgebung: Windows 8.0

  • Klicken Sie rechts auf das Quadrat und wählen Sie "Element Untersuchen". Es sollte Ihnen sagen, viele interessante Dinge über die CSS -, die angewendet wurde, und ob oder nicht die Symbole wurden geladen.
  • Ich hab das aber nicht finden, nichts Auffällig, außer dass Chrome eingefügt hat :before zwischen span. Bitte lassen Sie mich wissen, wie kann ich überprüfen, ob Symbole geladen wurden oder nicht. Ich bin nicht in der UI, dem es schwer fällt...
  • Haben einen Blick für das "hintergrund-Bild" CSS-das ist nicht Durchgestrichen, und achten Sie auf die url. Dann gehen Sie auf die Registerkarte "Network" (eventuell müssen Sie die Seite neu laden) und sehen, wo das sprite geladen wird. Die Chancen sind es wird ein status 304 was bedeutet, es wurde geladen aus dem cache. In diesem Fall, versuchen Sie den cache leeren. Wenn es ein 404 status oder etwas anderes, Sie haben andere Probleme.
  • Zeit für mich, ins Bett zu gehen 🙂 Es war einfach cache-problem. Jedenfalls habe ich gelernt, über debugging. Nochmals vielen Dank! Bitte poste deinen letzten Kommentar als Antwort, ich werde akzeptieren.
  • Ich bin in der Klemme, nachdem er unten Stimmen für meine gewählte Antwort richtig, Wellington Zanelli ' s Kommentar(in der Tat, Glyphicons sind Schrift basiert) und die Antwort von @Chris Barr, wie das löschen des cache haben mein problem zu lösen(wie vorgeschlagen von Paul Tomblin im obigen Kommentar).
  • Mach dir keine sorgen. Mein Rat steht immer noch. Die Beratung ist etwas anders für glyphicons statt sprites, aber jeder mit einem halben Gehirn sollte in der Lage sein, um herauszufinden, den Unterschied.
  • Die akzeptierte Antwort ist nicht die Lösung, oder zumindest nicht für mich. Ich bin mit Chrome V37 auf einem Mac und arbeiten auf eine Website mit Bootstrap 3, die mit MaxCDN. Ich bekomme Kisten an Ort und Stelle von glyphicon-font icons, die nur zeitweise. In meinem Fall, um die fonts zu Rendern, sobald ich den Mauszeiger über Sie. Suche Entwickler-tools sieht alles okay, soweit ich das sagen kann. Fragen, die Benutzer, Ihren cache zu löschen ist keine option, entweder.

InformationsquelleAutor lupchiazoem | 2014-01-03
  1. 31

    Eher als dein problem lösen, ich bevorzuge es, zu lehren, wie Sie zu beheben, Ihre eigenen problem.

    1. Der rechten Maustaste auf das element und wählen Sie "Element Untersuchen". Erscheint ein Fenster zeigt Ihnen einige nützliche Informationen über die html-und die CSS -, die angewendet werden.
    2. Wenn es ein sprite-Bild (wie in Bootstrap 2), Blick in die CSS auf der rechten Seite, auf der Suche nach der top-die meisten (nicht durchgestrichenen) background-image. Die url für die sprite-Bild. Wenn es ein glyphicon (wie in Bootstrap 3), sich für die font-family statt.
    3. Gehen Sie auf die Registerkarte "Netzwerk". Möglicherweise müssen Sie die Seite aktualisieren, um hilfreiche Sachen dort.
    4. Suchen, wo Sie geladen ist, das sprite-image oder Schrift (z.B. glyphicons-Halblinge-regelmäßig.woff). Wenn Sie sagt, Sie hat den status "304", das heißt, es wurde geladen aus dem cache. In diesem Fall, löschen des cache und Neuladen der Seite könnte Ihr problem lösen.
    5. Wenn es nicht ein "304" - status, Sie könnten ein problem haben, bei dem der web-server nicht mit dem Bild (ein "404" oder ähnlicher status) oder es kommt nicht richtig aus irgendeinem Grund.
    6. Wenn das löschen des cache hat das problem nicht lösen, klicken Sie auf die URL für das sprite-image oder Schrift auf die Registerkarte Netzwerk, und klicken Sie dann auf den "Vorschau" - Registerkarte. Was Sie sehen werden, ist ein block-Bild mit Symbol-und allen anderen Symbolen oder alphanumerischen Zeichen in dieser Schrift. Wenn dies ist nicht, was Sie sehen, wieder gibt es wahrscheinlich etwas falsch mit dem, was Ihr web-server serviert.
    7. Wenn die sprite-Bild korrekt ist, dann gibt es wahrscheinlich etwas falsch mit der CSS, wo du bist versehentlich überschreiben der hintergrund-position für das sprite. Wieder, gehen Sie zurück zu Ihrem Reiter Elemente und Blick auf die CSS-generierte.
    • Ausgezeichnete Antwort!
    • Diese Antwort bezieht sich nicht auf Bootstrap 3. In Bootstrap 3 die Glyphicons sind die Schrift-basierten, nicht-sprites wie Sie sagte.
    • Ok, für diejenigen von Euch, die nicht in der Lage sind, um herauszufinden, wie nehmen Sie die Ratschläge für die sprites und die zwei äußerst geringfügige änderungen zu machen, die Ratschläge, die Arbeit für die glyphicons, die ich geschrieben habe, es für Sie.
    • Einige glyphicons funktionieren eben nicht mit chrome(ab v32.0). Testen Sie ein paar verschiedene glyphicons, um zu sehen, ob es ein chrome-Problem oder ein server - /code-Problem.
    • Als Chris notes, es war ein Fehler in der Bootstrap -, das wurde toleriert von vielen Browsern (für eine Weile), aber brach, wenn Chrome aktualisiert wurde. Wenn Sie die neueste version von glyphicons, für viele Anwender ist das problem behoben. Alternativ könnte ein Benutzer einfach mit einem CDN und damit umgehen, die Probleme, die Sie sprechen (cf. "Get Bootstrap", CDN-Abschnitt: getbootstrap.com/getting-started/#download)
    • Ziemlich gute Antwort, auch ohne die änderungen verhielt es sich wie erläutert.
    • Hast mein problem nicht lösen, aber eine tolle Antwort zu tun, einige Spuren. gute Erklärung.

    InformationsquelleAutor Paul Tomblin
  2. 10

    Ich hatte das gleiche problem. Die einfachste Lösung ist, direkt importieren Sie die CSS aus dem hiperlink, nicht herunterladen:

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

    Das problem ist, dass die CSS verwenden, andere relative Pfade zu anderen Dateien. Daher, Sie können tun 2 Dinge:

    1. Download alle relativen Pfade.

    2. Sie können einfach verwenden Sie die hyperlink - (einfacher).

    InformationsquelleAutor Gines Hidalgo
  3. 1

    Wie es aussieht wird das ein Fehler in WebKit, die wurde hier berichtet: https://bugs.webkit.org/show_bug.cgi?id=76152

    Auch, der Schöpfer von GlyphIcons sagt, er ist sich dieses Problems bewusst und wird versuchen, die verschiedenen unicode-Werte in der nächsten Version zu bekommen, um diesen Fehler: https://twitter.com/glyphicons/status/423426740128854016

    InformationsquelleAutor Chris Barr
  4. 1

    Anmerkung für die Leser: Lesen @user2261073 ist Kommentar und @Jeff ' s Antwort über einen bug in der customizer. Es ist wahrscheinlich die Ursache für dein problem.

    Die font-Datei wird nicht richtig geladen. Überprüfen Sie, ob die Dateien werden in Ihre erwartete Position.

    @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');
}

    Als angegeben von Daniel, es könnte auch ein mimetype Problem. Chrome dev-tools zeigen Sie heruntergeladene Schriftarten in der Registerkarte "network":

    InformationsquelleAutor Shiv Singh
  5. 1

    Meine .htaccess in /wp-content verursachte einen Fehler durch eine Dateityp-Einschränkung. Nachdem ich Hinzugefügt woff2, um die Liste der erlaubten Datei-Typen funktioniert alles wieder schön.

    # 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>
    InformationsquelleAutor Browsergirl
  6. 1

    Ich hatte das gleiche problem wie du:

    1. Gehen Sie zu Ihrem CSS-Ordner.
    2. Öffnen Sie die bootstrap.min.css Datei.
    3. Suche nach glyphicon text,.
    4. Können Sie die url-Adresse.
    5. Sollten Sie die font - Ordner-Namen fonts.
    6. Gehen und genießen Sie Ihr Leben. 🙂
    InformationsquelleAutor mohsen Irani
  7. 0

    Wenn die schriftart-Antwort-header ist "Content-Type:text/html; charset=UTF-8" die chrome v38+ problem, zeigen die bootstrap glyphicons, es wird dieses Problem beheben, wenn set der response-header als "Content-Type:application/font-woff"

    InformationsquelleAutor Jack
  8. 0

    Müssen Sie herunterladen bootstrap-fonts-Ordner, und in der bootstrap.min.css finden Sie Pfad wie ../fonts glyphicon, müssen Sie diesen Pfad ändern auf "fonts/" entfernen ".. /wenn in Ihrem Ordner "Schriftarten" ist innerhalb der gleichen bootstarp.min.css .

    genießen 🙂

    InformationsquelleAutor Laxmikant
  9. 0

    Entdeckte ich, dass bei der Inspektion die CSS von bootstrap.min.css, dass das Verzeichnis für die "Schriften" Hinzugefügt hatte Räume, die bedeutete, dass es Berufung war für Dateien, die nicht existieren, weil die Dateinamen nicht über jene Räume in Ihnen. Zum Beispiel, es wurde aufgelistet, den ganzen Weg durch jeden einzelnen, wie

    .. /fonts /glyphicons - Halblinge - regelmäßig.eot

    wenn es gewesen sein sollte,

    .. /fonts/glyphicons-Halblinge-regelmäßig.eot

    Sobald ich Sie gelöscht, die Räume, neu hochgeladen, die CSS, gelöscht, den browser-cache, und neu geladen (F5-Taste) die glyphicons endlich aufgetaucht. Vor dem entfernen der Leerzeichen, die einzige andere option, die für mich gearbeitet wurde die von Gines Hidalgo, der vorschlug, den Download der CSS über einen hyperlink. Aber mit der Entdeckung, dass das entfernen der Leerzeichen behebt das problem, dass die option nicht mehr notwendig.

    InformationsquelleAutor Eric Patterson
  10. 0

    Meistens die bootstrap-Versionierung Problem und einfach Hinzugefügt habe ich die URL unten.

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

    Sicherzustellen, dass Sie die Schriftarten-Ordner in Ihrem Projekt neben der js, css und andere.

    Wenn die Schriftarten-Ordner in der Projekt-und der Weg in the bootstrap.min.css - Datei ist wie diese ../fonts/glyphicons ie der Ordner fonts nicht in den css-Ordner, Dann wird alles gut funktionieren. Danke.

    InformationsquelleAutor Bukenya
  12. -1

    Wenn es hilft, mit bootstrap.css anstelle von bootstrap.min.css das Problem gelöst für mich.

    InformationsquelleAutor coda
Schreibe einen Kommentar