Bootstrap 3 Glyphicons funktionieren nicht

Ich habe Bootstrap 3.0 heruntergeladen und kann die Glyphicons nicht zum Laufen bringen. Ich bekomme eine Art “E003” -Fehler. Irgendwelche Ideen, warum das passiert? Ich habe sowohl lokal als auch online versucht und ich bekomme immer noch das gleiche Problem.

Ich hatte das gleiche Problem und konnte außer den versteckten Kommentaren auf dieser Seite keine Informationen darüber finden. Meine fontsdateien wurden zwar laut Chrome geladen, aber die Symbole wurden nicht ordnungsgemäß angezeigt. Ich mache das eine Antwort, damit es hoffentlich anderen hilft.

Irgendetwas stimmte nicht mit den Font-Dateien, die ich aus dem Customizer-Tool von Bootstrap 3 heruntergeladen habe. Um die richtigen fonts zu erhalten, gehen Sie zur Bootstrap-Homepage und laden Sie die vollständige .zip-Datei herunter. Entpacken Sie die vier Schriftdateien von dort in Ihr Schriftenverzeichnis und alles sollte funktionieren.

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


Die Schriftartdatei wird nicht korrekt geladen. Überprüfen Sie, ob sich die Dateien an ihrem 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 MIME-Problem handeln. Die Entwicklungstools von Chrome zeigen heruntergeladene fonts auf der Registerkarte “Netzwerk” an:

Chrome Netzwerk Tab Schriftart herunterladen

In meinem Fall bekam ich einen 404 für Glyphicons-Halblings-regulary.woff und nicht sichtbare Glyphicons in mobilen Browsern.

Sieht aus, als gäbe es einige Verwirrung über den MIME-Typ für woff, mehr als ein MIME-Typ wird von verschiedenen Browsern akzeptiert, aber das W3C sagt :

 application/font-woff 

Edit: Nach dem Test funktioniert der folgende MIME-Typ für woff derzeit auf allen Browsern:

 application/x-font-woff 

Bearbeiten: Die neueste Version von Bootstrap zu diesem Zeitpunkt (3.3.5) verwendet .woff2-Fonts mit dem gleichen anfänglichen Ergebnis wie .woff, das W3C definiert immer noch die Spezifikation, aber im Moment scheint der MIME-Typ zu sein:

 application/font-woff2 

-Wenn Sie die bestbewertete Antwort befolgt haben und es immer noch nicht funktioniert :

Der Font Ordner MUSS sich auf der gleichen Ebene wie Ihr CSS-Ordner befinden. Das Reparieren des Pfades in bootstrap.css funktioniert nicht .

Bootstrap.css muss genau so zum Ordner ” Fonts navigieren:

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

Wenn die anderen Lösungen nicht funktionieren, sollten Sie versuchen, Glyphicons von einer externen Quelle zu importieren, anstatt sich auf Bootstrap zu verlassen, um alles für Sie zu tun. Um dies zu tun:

Sie können dies entweder in HTML tun:

  

Oder CSS:

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css") 

Dank an Edsofi aus diesem Thread: Bootstrap 3 Glyphicons CDN

Ich habe diese alte Frage von mir durchgesehen und da, was bis jetzt die richtige Antwort sein sollte, wurde ich von mir in den Kommentaren gegeben, ich denke, ich verdiene es auch dafür.

Das Problem lag darin, dass die Glyphicon-Font-Dateien, die vom Customizer-Tool des Bootstrap heruntergeladen wurden, nicht mit denen identisch waren, die von der Umleitung auf der Bootstrap-Homepage heruntergeladen wurden. Die, die funktionieren, wie sie sollten, sind diejenigen, die über den folgenden Link heruntergeladen werden können:

 http://getbootstrap.com/getting-started/#download 

Jeder, der Probleme mit alten schlechten Customizer-Dateien hat, sollte die Fonts vom obigen Link überschreiben.

Azure Websites fehlen Woff MIME-Konfiguration. Sie müssen folgenden Eintrag in web.config hinzufügen

        

Wie in @Stijn beschrieben, ist der Standardspeicherort in Bootstrap.css falsch, wenn dieses Paket von Nuget .

Ändern Sie diesen Abschnitt wie folgt:

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

IIS wird standardmäßig keine .woff Dateien serverbasieren. In IIS müssen Sie daher einen -Eintrag zu Ihrer Datei web.config .

 < ?xml version="1.0" encoding="UTF-8"?>        

Ich änderte meine weniger variable.less Datei Ich änderte die Variable

 @icon-font-path: "fonts/"; 

das Original war

 @icon-font-path: "../fonts/"; 

Es verursachte ein Problem

Falls jemand anders hier gelandet ist und Bootstrap> = v4.0 verwendet: glyphicon support wird gelöscht

Der relevante Teil aus den Release Notes:

Die Glyphicons-Symbolschrift wurde entfernt. Wenn Sie Symbole benötigen, sind einige Optionen:

die Upstream-Version von Glyphicons

Octicons

Schrift Awesome

Quelle: https://v4-alpha.getbootstrap.com/migration/#components

Wenn Sie Glyphicons verwenden möchten, müssen Sie es separat herunterladen.

Ich persönlich habe Font Awesome ausprobiert und es ist ziemlich gut. Das Hinzufügen von Icons ähnelt dem von Glypicon:

  

Dies liegt an falscher Codierung in bootstrap.css und bootstrap.min.css. Wenn Sie Bootstrap 3.0 von dem Customizer downloaden, fehlt der folgende Code:

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

Da dies der Hauptcode für die Verwendung von Glyphicons ist, wird es nicht funktionieren …

Laden Sie die CSS-Dateien aus dem vollständigen Paket herunter und dieser Code wird implementiert.

Haben Sie alle folgenden Dateien in Ihrem fontsverzeichnis?

 glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff 

Ein anderes Problem / Lösung könnte diesen Bootstrap 2.x Code haben:

  

und beim Migrieren basierend auf dem Guide ( .icon-* ---> .glyphicon .glyphicon-* ):

  

Sie vergessen, die Icon-class hinzuzufügen (enthält die Font-Referenz):

  

Unten ist, was es für mich repariert hat. Ich habe den Fehler “Bad URI” in der Firebug-Konsole erhalten. Die Symbole wurden als E ### Nummern angezeigt. Ich musste eine .htaccess Datei in meinem ‘Fonts’ Verzeichnis hinzufügen. Header set Access-Control-Allow-Origin "*" Mögliches Duplikat von: Downloadable font on Firefox: Bad URI oder Cross-Site-Zugriff nicht erlaubt

Das war der Grund, warum die Icons nicht für mich auftauchen:

 * { arial, sans-serif !important; } 

Nachdem ich diesen Teil meines CSS , hat alles so funktioniert, wie es sollte. Das Wichtige war derjenige, der Ärger verursachte.

Das ist ein langer Schuss, aber es war mein Fall und da ist es nicht schon hier.

Wenn du Twitter Bootstrap von SASS mit gulp-sass oder grunt-sass ie grunt-sass . node-sass . Stellen Sie sicher, dass Ihre Knotenmodule auf dem neuesten Stand sind, insbesondere wenn Sie an einem ziemlich alten Projekt arbeiten.

Es stellt sich heraus, dass seit einiger Zeit die SASS-Direktive @at-root bei der Definition des @font-face in Glyphicons verwendet wird, siehe https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets /stylesheets/bootstrap/_glyphicons.scss .

Der Haken ist hier, dass node-sass dh. libsass unterstützt die @at-root Direktive nicht, wenn sie zu alt ist. Wenn dies der Fall ist, erhalten Sie ein @font-face in einem @at-root dem der Browser keine Ahnung hat, was er tun soll. Das Ergebnis davon ist, dass keine Schriftart heruntergeladen wird und Sie wahrscheinlich Müll anstelle von Symbolen sehen werden.

Hinweis: Unten ist wahrscheinlich ein Nischenszenario, aber ich wollte es teilen, falls jemand anderes es nützlich finden könnte.

In einem Rails-Projekt verwenden wir eine bootstrap-sass durch ein Juwel, das eine Rails-Engine ist, die bootstrap-sass . Alles war gut im Hauptprojekt mit Ausnahme der Schriftpfadauflösung Glyphicon.

 GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) 

Wir haben festgestellt, dass $bootstrap-sass-asset-helper während der Auflösung false war, als wir erwartet hatten, dass es wahr ist, also war der Pfad anders.

Wir haben dafür $bootstrap-sass-asset-helper dass der $bootstrap-sass-asset-helper im Engine-Juwel initialisiert wurde:

 // explicit sprockets import to get glyphicon font paths correct @import 'bootstrap-sprockets'; @import "bootstrap/variables"; 

Dies führte zB dazu, dass der Pfad aufgetriggers wurde zu:

 /assets/bootstrap/glyphicons-halflings-regular.woff 

Auch dies sollte in keinem normalen Rails-Projekt mit bootstrap-sass , wir verwenden einfach eine Menge Ansichten und das hat sich für uns bootstrap-sass . Hoffentlich kann dies jemand anderem helfen.

In den offiziellen Dokumenten steht, dass Schriften nicht gerendert werden.

Ändern der Position der Symbolschrift Bootstrap geht davon aus, dass sich die Schriftdateien für die Symbole im Verzeichnis ../fonts/ relativ zu den kompilierten CSS-Dateien befinden. Das Verschieben oder Umbenennen dieser Schriftdateien bedeutet, dass Sie das CSS auf drei verschiedene Arten aktualisieren müssen: Ändern Sie die Variablen @ icon-font-path und / oder @ icon-font-name in den Quelldateien Less. Verwenden Sie die Option relative URLs, die vom Less-Compiler bereitgestellt wird. Ändern Sie die URL-Pfade im kompilierten CSS. Verwenden Sie jede Option, die am besten zu Ihrer spezifischen Entwicklungsumgebung passt.

Ansonsten könnte es sein, dass Sie es versäumt haben, den fontsordner in das Stammverzeichnis zu kopieren

Ich hatte dieses Problem und es wurde von der Variablen.less-Datei verursacht. Überschreiben, um den Icon-Font-Path-Wert zu setzen, triggerse das Problem.

Die strukturierte Datei sieht folgendermaßen aus:

 \Content \Bootstrap \Fonts styles.less variables.less 

Das Hinzufügen meiner eigenen Datei “variables.less” im Stammverzeichnis von “Content” und das Verweisen auf diese Datei in “styles.less” triggerse den 404-Fehler.

Variables.less enthält:

 @icon-font-path: "fonts/"; 

Ich habe Bootstrap von NuGet. Als ich meine Website veröffentlichte, funktionierten die Glyphen nicht.

In meinem Fall funktionierte ich, indem ich die Erstellungsaktion für jede der Schriftdateien auf “Inhalt” setzte und sie auf “Immer kopieren” setzte.

Stellen Sie sicher, dass Sie beispielsweise die Schriftfamilie nicht zu groß angeben

 *{font-family: Verdana;} 

wird die Halbling-Schriftart von i-Elementen entfernen.

Ich hatte das gleiche Problem, wo der Browser die Font-Dateien nicht finden konnte, und mein Problem war auf Ausschlüsse in meiner .htaccess-Datei zurückzuführen, die Whitelisting-Dateien enthielt, die nicht zur Verarbeitung an index.php gesendet werden sollten. Da die Schriftartdatei nicht geladen werden konnte, wurden die Zeichen durch BLOB ersetzt.

 RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$ RewriteCond %{REQUEST_URI} !-d RewriteRule ^ index.php [L,QSA] 

Wie Sie sehen können, sind Dateien wie images, rss und xml vom Umschreiben ausgeschlossen, aber die Font-Dateien sind .woff und .woff2 Dateien, also mussten diese auch zur Whitelist hinzugefügt werden.

 RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$ RewriteCond %{REQUEST_URI} !-d RewriteRule ^ index.php [L,QSA] 

Durch Hinzufügen von woff und woff2 zur Whitelist können die Font-Dateien geladen werden und die Glyphicons sollten dann korrekt angezeigt werden.

Sie müssen mit dieser Reihenfolge festlegen:

   

Was für mich funktionierte, war das Ersetzen von Routen von:

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

zu

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

Ich hatte einen Boxbreitencode \ e094 für glyphicon-arrow-down, in der Tat triggerse ich das Problem beim Hinzufügen von Glyphon in CSS-class wie folgt :

  

wenn es jemandem helfen könnte …