Bootstrap 3 Glyphicons funktionieren nicht

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.

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.

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.

@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 angegeben, könnte es sich auch um ein Mimetyp-Problem handeln. Die Entwicklertools von Chrome zeigen heruntergeladene Schriftarten auf der Registerkarte "Netzwerk" an:

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 :

application/font-woff

Bearbeiten: Nach dem Testen funktioniert der folgende MIME-Typ für woff derzeit in allen Browsern:

application/x-font-woff

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:

application/font-woff2

-Wenn Sie der am höchsten bewerteten Antwort gefolgt sind und sie immer noch nicht funktioniert :

Der FontOrdner MUSS sich auf derselben Ebene wie Ihr CSS-Ordner befinden. Das Festlegen des Pfads funktioniert bootstrap.css nicht .

Bootstrap.cssmuss genau so zum FontsOrdner 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, 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:

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Oder CSS:

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

Dank an edsiofi aus diesem Thread: Bootstrap 3 Glyphicons CDN

Falls jemand anderes hier gelandet ist und Bootstrap> = v4.0 verwendet: Die Glyphicon-Unterstützung wird eingestellt

Der relevante Teil aus den Versionshinweisen:

Die Glyphicons-Symbolschrift wurde gelöscht. Wenn Sie Symbole benötigen, stehen folgende Optionen zur Verfügung:

die Upstream-Version von Glyphicons

Oktikonen

Font Awesome

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:

<i class="fas fa-chess"></i>

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:

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

Jeder, der Probleme mit alten fehlerhaften Customizer-Dateien hat, sollte die Schriftarten über den obigen Link überschreiben.

Auf Azure-Websites fehlt die MIME-Konfiguration. Sie müssen den folgenden Eintrag in web.config hinzufügen

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

Wie bei @Stijn beschrieben, ist der Standardspeicherort in Bootstrap.cssfalsch, wenn dieses Paket von installiert wird Nuget.

Ändern Sie diesen Abschnitt so, dass er folgendermaßen aussieht:

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

Sie können diese Codezeile hinzufügen und fertig.

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Vielen Dank.

IIS wird .woffstandardmäßig keine Serverdateien verwenden. Daher müssen Sie in IIS einen <mimeMap>Eintrag zu Ihrer web.configDatei hinzufügen .

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

Haben Sie alle unten aufgeführten Dateien in Ihrem Schriftartenverzeichnis?

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

Ich habe meine Datei less variables.less geändert. Ich habe die Variable geändert

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

Das Original war

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

Es verursachte ein Problem

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:

@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, funktioniert es nicht ...

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

Dies war der Grund, warum die Symbole für mich nicht angezeigt wurden:

* {
    arial, sans-serif !important;
}

Nachdem ich diesen Teil von mir entfernt habe CSS, hat alles so funktioniert, wie es sollte. Das! Wichtige war das, was Ärger verursachte.

Ein anderes Problem / eine andere Lösung könnte darin bestehen, diesen Bootstrap 2.x-Code zu haben:

<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>

und bei der Migration basierend auf der Anleitung ( .icon-* ---> .glyphicon .glyphicon-*):

<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>

Sie vergessen, die Symbolklasse (mit der Schriftartreferenz) hinzuzufügen:

<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>

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ässig

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-sassoder grunt-sassdh 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-rootbei der Definition der @font-faceIn-Glyphicons verwendet wird (siehe https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphons) .

Das Gotcha hier ist das node-sassdh. libsassunterstütze das nicht@at-root Richtlinie nicht, wenn sie zu alt ist. Wenn dies der Fall ist, erhalten Sie eine @font-faceUmhüllung, mit @at-rootder 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.

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.

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

Wir fanden das $bootstrap-sass-asset-helperwarfalse 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-helperdafür gesorgt, dass das im Engine-Juwel initialisiert wurde, indem wir:

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

Dies führte beispielsweise dazu, dass der Pfad aufgelöst wurde in:

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

Auch dies sollte bei keinem normalen Rails-Projekt erforderlich sein. bootstrap-sassWir verwenden zufällig viele Ansichten wieder, und dies hat für uns funktioniert. Hoffentlich kann dies jemand anderem helfen.

In der offiziellen Dokumentation heißt es, dass Schriftarten nicht gerendert werden.

Ändern des Speicherorts für Symbolschriftarten Bootstrap geht davon aus, dass sich Symbolschriftdateien im Verzeichnis ../fonts/ relativ zu den kompilierten CSS-Dateien befinden. Das Verschieben oder Umbenennen dieser Schriftdateien bedeutet, dass das CSS auf drei Arten aktualisiert wird: Ändern Sie die Variablen @ icon-font-path und / oder @ icon-font-name in den Quelldateien Less. Verwenden Sie die Option für relative URLs, die vom Less-Compiler bereitgestellt wird. Ändern Sie die URL () -Pfade im kompilierten CSS. Verwenden Sie die Option, die am besten zu Ihrem spezifischen Entwicklungssetup passt.

Ansonsten könnte es sein, dass Sie den Schriftartenordner nicht in das Stammverzeichnis kopiert haben

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:

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

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:

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

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.

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 :

<i class="glyphicon  glyphicon-arrow-down"></i>

wenn es jemandem helfen könnte ...

Stellen Sie beispielsweise sicher, dass Sie die Schriftfamilie nicht zu stark angeben

*{font-family: Verdana;}

entfernt die Halbling-Schriftart aus i-Elementen.

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.phpzur Verarbeitung gesendet werden sollte. Da die Schriftdatei 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, werden Dateien wie Bilder, RSS und XML vom Umschreiben ausgeschlossen, die Schriftdateien jedoch .woffund .woff2Dateien, sodass diese auch zur Whitelist hinzugefügt werden müssen.

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

Hinzufügen woff undwoff2 zur Whitelist können die Schriftdateien geladen werden, und die Glyphicons sollten dann ordnungsgemäß angezeigt werden.

Sie müssen in dieser Reihenfolge festlegen:

<link rel="stylesheet" href="path/bootstrap.min.css"> 
<style type="text/css"> 
     @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'); } 
</style>

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

So fügen Sie das Symbol in Bootstrap 3 ein

<span class="glyphicon glyphicon-bell"></span>

http://glyphicons.bootstrapcheatsheets.com/

Ich hoffe, das hilft.

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

Ich verwende Bootstrap mit Namespace und Glyphicons, die nicht funktionieren, aber nach dem Hinzufügen der obigen Zeile in Code funktionieren Glyphicons einwandfrei.

Ich habe gerade die Schriftart von bootstrap.css mit Strg + c, Strg + v umbenannt und es hat funktioniert.