Ich habe Bootstrap 3.0 heruntergeladen und kann die Glyphicons nicht zum Laufen bringen. Ich erhalte eine Art "E003" -Fehler. Irgendwelche Ideen, warum das passiert? Ich habe es sowohl lokal als auch online versucht und habe immer noch das gleiche Problem.
twitter-bootstrap-3
glyphicons
Rollerlord
quelle
quelle
Antworten:
Ich hatte das gleiche Problem und konnte keine Informationen darüber finden, außer in den versteckten Kommentaren auf dieser Seite. Meine Schriftdateien wurden laut Chrome einwandfrei geladen, aber die Symbole wurden nicht richtig angezeigt. Ich mache dies zu einer Antwort, damit es hoffentlich anderen hilft.
Mit den Schriftdateien, die ich vom Customizer-Tool von Bootstrap 3 heruntergeladen habe, stimmte etwas nicht. Um die richtigen Schriftarten zu erhalten, rufen Sie die Bootstrap-Homepage auf und laden Sie die vollständige ZIP-Datei herunter. Extrahieren Sie die vier Schriftdateien von dort in Ihr Schriftartenverzeichnis und alles sollte funktionieren.
quelle
Hinweis für Leser: Lesen Sie unbedingt den Kommentar von @ user2261073 und die Antwort von @ Jeff bezüglich eines Fehlers im Customizer. Es ist wahrscheinlich die Ursache Ihres Problems.
Die Schriftartdatei wird nicht korrekt geladen. Überprüfen Sie, ob sich die Dateien an ihrem erwarteten Speicherort befinden.
Wie von Daniel angegeben, könnte es sich auch um ein Mimetyp-Problem handeln. Die Entwicklertools von Chrome zeigen heruntergeladene Schriftarten auf der Registerkarte "Netzwerk" an:
quelle
In meinem Fall bekam ich eine 404 für Glyphicons-Halblings-Regular.woff und nicht sichtbare Glyphicons in mobilen Browsern.
Es sieht so aus, als ob es einige Verwirrung über den MIME-Typ für woff gibt, wobei mehr als ein MIME-Typ von verschiedenen Browsern akzeptiert wird, aber das W3C sagt :
Bearbeiten: Nach dem Testen funktioniert der folgende MIME-Typ für woff derzeit in allen Browsern:
Bearbeiten: Die aktuellste Version von Bootstrap (3.3.5) verwendet derzeit .woff2-Schriftarten mit demselben Anfangsergebnis wie .woff. Das W3C definiert die Spezifikation weiterhin, aber im Moment scheint der MIME-Typ zu sein:
quelle
application/x-font-woff
Dann waren Firefox und Chrome endlich beide glücklich :)-Wenn Sie der am höchsten bewerteten Antwort gefolgt sind und sie immer noch nicht funktioniert :
Der
Font
Ordner MUSS sich auf derselben Ebene wie Ihr CSS-Ordner befinden. Das Festlegen des Pfads funktioniertbootstrap.css
nicht .Bootstrap.css
muss genau so zumFonts
Ordner navigieren :quelle
css
Ordner ein Unterordner des Ordners sein, der Ihre HTML-Datei enthält. Sie müssen also mindestens 1) Ihre HTML-Datei, 2) eine CSS-Datei in einem Unterordner namenscss
und 3) die Schriftdateien in einem Unterordner namens habenfonts
.//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css
es für mich zu lösen.Wenn die anderen Lösungen nicht funktionieren, möchten Sie möglicherweise versuchen, Glyphicons von einer externen Quelle zu importieren, anstatt sich darauf zu verlassen, dass Bootstrap alles für Sie erledigt. Um dies zu tun:
Sie können dies entweder in HTML tun:
Oder CSS:
Dank an edsiofi aus diesem Thread: Bootstrap 3 Glyphicons CDN
quelle
Falls jemand anderes hier gelandet ist und Bootstrap> = v4.0 verwendet: Die Glyphicon-Unterstützung wird eingestellt
Der relevante Teil aus den Versionshinweisen:
Quelle: https://v4-alpha.getbootstrap.com/migration/#components
Wenn Sie Glyphicons verwenden möchten, müssen Sie diese separat herunterladen.
Ich persönlich habe Font Awesome ausprobiert und es ist ziemlich gut. Das Hinzufügen von Symbolen ähnelt dem Glypicon-Verfahren:
quelle
Ich habe diese alte Frage von mir durchgesehen und da ich in den Kommentaren angegeben habe, was bis jetzt die richtige Antwort sein sollte, denke ich, dass ich auch die Anerkennung dafür verdiene.
Das Problem lag in der Tatsache, dass die vom Customizer-Tool von bootstrap heruntergeladenen Glyphicon-Schriftdateien nicht mit denen identisch waren, die von der Umleitung auf der Bootstrap-Homepage heruntergeladen wurden. Diejenigen, die so funktionieren, wie sie sollten, können über den folgenden Link heruntergeladen werden:
Jeder, der Probleme mit alten fehlerhaften Customizer-Dateien hat, sollte die Schriftarten über den obigen Link überschreiben.
quelle
application/vnd.ms-fontobject
- .eot -application/x-font-woff
- .woff -application/x-font-ttf
- .ttf -image/svg+xml
- .svgAuf Azure-Websites fehlt die MIME-Konfiguration. Sie müssen den folgenden Eintrag in web.config hinzufügen
quelle
woff, woff2 and ttf
Erweiterungen?Wie bei @Stijn beschrieben, ist der Standardspeicherort in
Bootstrap.css
falsch, wenn dieses Paket von installiert wirdNuget
.Ändern Sie diesen Abschnitt so, dass er folgendermaßen aussieht:
quelle
Sie können diese Codezeile hinzufügen und fertig.
Vielen Dank.
quelle
IIS wird
.woff
standardmäßig keine Serverdateien verwenden. Daher müssen Sie in IIS einen<mimeMap>
Eintrag zu Ihrerweb.config
Datei hinzufügen .quelle
Haben Sie alle unten aufgeführten Dateien in Ihrem Schriftartenverzeichnis?
quelle
Ich habe meine Datei less variables.less geändert. Ich habe die Variable geändert
Das Original war
Es verursachte ein Problem
quelle
$icon-font-path: "/assets/bootstrap/"
.Dies liegt an einer falschen Codierung in bootstrap.css und bootstrap.min.css. Wenn Sie Bootstrap 3.0 vom Customizer herunterladen, fehlt der folgende Code:
Da dies der Hauptcode für die Verwendung von Glyphicons ist, funktioniert es nicht ...
Laden Sie die CSS-Dateien aus dem vollständigen Paket herunter und dieser Code wird implementiert.
quelle
Dies war der Grund, warum die Symbole für mich nicht angezeigt wurden:
Nachdem ich diesen Teil von mir entfernt habe
CSS
, hat alles so funktioniert, wie es sollte. Das! Wichtige war das, was Ärger verursachte.quelle
Ein anderes Problem / eine andere Lösung könnte darin bestehen, diesen Bootstrap 2.x-Code zu haben:
und bei der Migration basierend auf der Anleitung (
.icon-* ---> .glyphicon .glyphicon-*
):Sie vergessen, die Symbolklasse (mit der Schriftartreferenz) hinzuzufügen:
quelle
Unten ist, was es für mich behoben hat. Ich habe in der Firebug-Konsole den Fehler "Bad URI" erhalten. Die Symbole wurden als E ### -Nummern angezeigt. Ich musste eine .htaccess-Datei in mein 'fonts'-Verzeichnis einfügen.
<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>
Mögliches Duplikat von: Herunterladbare Schriftart unter Firefox: Ungültige URI oder standortübergreifender Zugriff nicht zulässigquelle
Dies ist ein sehr langer Dreh, aber es war mein Fall und da es noch nicht da ist.
Wenn Sie Twitter Bootstrap aus SASS mit
gulp-sass
odergrunt-sass
dh kompilieren .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 die SASS-Direktive seit einiger Zeit
@at-root
bei der Definition der@font-face
In-Glyphicons verwendet wird (siehe https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphons) .Das Gotcha hier ist das
node-sass
dh.libsass
unterstütze das nicht@at-root
Richtlinie nicht, wenn sie zu alt ist. Wenn dies der Fall ist, erhalten Sie eine@font-face
Umhüllung, mit@at-root
der der Browser keine Ahnung hat, was er tun soll. Das Ergebnis ist, dass keine Schriftart heruntergeladen wird und Sie wahrscheinlich Müll anstelle von Symbolen sehen.quelle
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 einiges durch ein Juwel, das eine Rails-Engine verwendet
bootstrap-sass
. Mit Ausnahme der Auflösung des Glyphicon-Schriftpfads war im Hauptprojekt alles in Ordnung.Wir fanden das
$bootstrap-sass-asset-helper
warfalse
während der Auflösung , als wir erwarteten , dass es um wahr zu sein, so dass der Weg anders war.Wir haben
$bootstrap-sass-asset-helper
dafür gesorgt, dass das im Engine-Juwel initialisiert wurde, indem wir:Dies führte beispielsweise dazu, dass der Pfad aufgelöst wurde in:
Auch dies sollte bei keinem normalen Rails-Projekt erforderlich sein.
bootstrap-sass
Wir verwenden zufällig viele Ansichten wieder, und dies hat für uns funktioniert. Hoffentlich kann dies jemand anderem helfen.quelle
In der offiziellen Dokumentation heißt es, dass Schriftarten nicht gerendert werden.
Ansonsten könnte es sein, dass Sie den Schriftartenordner nicht in das Stammverzeichnis kopiert haben
quelle
Ich hatte dieses Problem und es wurde durch die Datei variables.less verursacht. Das Überschreiben, um den Wert für den Symbolschriftartenpfad festzulegen, löste das Problem.
Die strukturierte Datei sieht folgendermaßen aus:
Durch Hinzufügen meiner eigenen Datei variables.less im Stammverzeichnis von Content und Verweisen auf diese Datei in styles.less wurde der 404-Fehler behoben.
Variables.less enthält:
quelle
Ich habe Bootstrap von NuGet bekommen. Als ich meine Seite veröffentlichte, funktionierten die Glyphen nicht.
In meinem Fall hat es funktioniert, indem ich die Build-Aktion für jede der Schriftdateien auf "Inhalt" und auf "Immer kopieren" gesetzt habe.
quelle
Ich hatte einen Box-Breiten-Code \ e094 für Glyphicon-Pfeil nach unten. Tatsächlich löste ich das Problem beim Hinzufügen von Glyphicon in der CSS-Klasse wie folgt :
wenn es jemandem helfen könnte ...
quelle
Stellen Sie beispielsweise sicher, dass Sie die Schriftfamilie nicht zu stark angeben
entfernt die Halbling-Schriftart aus i-Elementen.
quelle
Ich hatte das gleiche Problem, bei dem der Browser die Schriftdateien nicht finden konnte, und mein Problem war auf Ausschlüsse in meiner .htaccess-Datei zurückzuführen, bei denen es sich um Whitelist-Dateien handelte, an die nicht
index.php
zur Verarbeitung gesendet werden sollte. Da die Schriftdatei nicht geladen werden konnte, wurden die Zeichen durch BLOB ersetzt.Wie Sie sehen können, werden Dateien wie Bilder, RSS und XML vom Umschreiben ausgeschlossen, die Schriftdateien jedoch
.woff
und.woff2
Dateien, sodass diese auch zur Whitelist hinzugefügt werden müssen.Hinzufügen
woff
undwoff2
zur Whitelist können die Schriftdateien geladen werden, und die Glyphicons sollten dann ordnungsgemäß angezeigt werden.quelle
Sie müssen in dieser Reihenfolge festlegen:
quelle
Was für mich funktionierte, war das Ersetzen von Routen von:
zu
quelle
So fügen Sie das Symbol in Bootstrap 3 ein
http://glyphicons.bootstrapcheatsheets.com/
Ich hoffe, das hilft.
quelle
Ich verwende Bootstrap mit Namespace und Glyphicons, die nicht funktionieren, aber nach dem Hinzufügen der obigen Zeile in Code funktionieren Glyphicons einwandfrei.
quelle
Ich habe gerade die Schriftart von bootstrap.css mit Strg + c, Strg + v umbenannt und es hat funktioniert.
quelle