Bootstrap 3 Glyphicons funktionieren nicht

360

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.

Rollerlord
quelle
1
Woher bekommst du den Fehler?
Daniel A. White
1
Überall, wo ich die Symbole einfüge ... Hier ist der Fehler, den ich bekomme. Ich habe nur Bootstrap vom Site Customizer heruntergeladen und die vorherigen Dateien ersetzt (Schriftdateien hatten jedoch unterschiedliche Namen). Jetzt funktionieren sie nicht ... Habe auch mehrere Browser ausprobiert, Firefox, Chrome, dh dasselbe ... i.imgur.com/2f474kX.jpg
Rollerlord
2
Ich habe heute die neueste Version heruntergeladen und die Glyphen werden nicht angezeigt, wenn ich die minimierte CSS-Datei verwende. Wenn ich die 'normale' bootstrap.css verwende, funktioniert alles einwandfrei.
Antonio Sesto
1
Ab dem 23. Juni 2015 enthalten die neueste Version v3.3.5 maxcdn Sie haben keine Fehler
1
Ich stellte fest, dass ich die Glyphicons auf einem weißen Hintergrund verwendete und erwartete, dass sie auftauchen würden. Mit <i style = "color: black" class = "glyphicon glyphicon-new-window"> </ i> wurde das Problem behoben.
Vijay Vepakomma

Antworten:

478

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.

Jeff
quelle
Sie haben viele Stunden Schmerz gespart. Ich hatte bereits eine Stunde lang Schmerzen gehabt, aber dann dachte ich darüber nach, hierher zu schauen.
Christina
6
Das Austauschen der Schriftdateien gegen die in bootstrap-3.0.0 der getbootstrap.com-Homepage enthaltenen Dateien funktioniert. Danke für den Tipp!
Michal Kopec
11
Richtige Antwort! Schriftdateien vom Customizer sind beschädigt!
Charles Ingalls
2
Ich wollte meine Antwort "Ich auch" hinzufügen und sagen, dass ich nach ein paar Stunden Mühe und fast Wut, die meine Karriere beendet hatte, diese Antwort gefunden habe und jetzt wieder Glyphicons habe. Vielen Dank!!
Dohpaz42
2
Ich kann es kaum erwarten, Teil aller Menschen zu sein, die Erfolg hatten, aber im Moment kann ich die Symbole immer noch nicht sehen, obwohl ich fast jede einzelne Lösung und Antwort des Stacks ausprobiert habe. Ich habe sogar versucht, eine komplett neue MVC 5-App zu starten und mit Nuget die neueste Bootstrap-Version 3.3.7 zu installieren, die alle Ordner korrekt installiert, und nichts zeigt einen 404 im Browser-Debugger-Tool oder irgendetwas, das mir sagt, dass die Schriftarten nicht geladen sind und Ich kann Ihnen sagen, dass der Code für die Spanne perfekt ist. Wo liegt also mein Problem? Ich weiß es ehrlich gesagt nicht. Ich habe alle Browser getestet und keiner zeigt die Symbole
Marc Roussel
235

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:

Chrome Network Tab Font herunterladen

user247702
quelle
5
und dass die Mimetypen richtig registriert sind.
Daniel A. White
4
... obwohl die Dateien beim Herunterladen der Datei bootstrap.zip vorhanden sein sollten, habe ich sie noch zweimal überprüft und alles ist vorhanden. Wie überprüfe ich die Registrierung der Mimetypen (=?)
Scooterlord
1
@ user2261073 Die .eot- Datei sollte nicht geladen werden, es sei denn, Sie verwenden Internet Explorer.
user247702
46
Sieht so aus, als hätte ich das Problem gefunden. Der Bootstrap-Customizer sendet anscheinend Schriftarten mit einer anderen Größe als die im gesamten Bootstrap-Paket, das mit den Beispielen geliefert wird. Ich habe die Dateien ersetzt und jetzt funktioniert alles einwandfrei. Es ist höchstwahrscheinlich ein Fehler im Customizer von Bootstrap? Wer weiß. Kann ich das irgendwo melden, damit sie es untersuchen können?
Rollerlord
2
@ user2261073 Sie können es im GitHub-Projekt melden. Es scheint bereits einen aktiven Fehlerbericht zu geben: github.com/twbs/bootstrap/issues/10008
user247702
78

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
D. Rosado
quelle
17
Dies wies mich in die gute Richtung, aber es gab mir auch eine weitere Warnung in Chrome ... Der MIME-Typ sollte tatsächlich sein: application/x-font-woffDann waren Firefox und Chrome endlich beide glücklich :)
Ghiscoding
Danke, das war das eigentliche Problem für mich. Alles funktionierte lokal einwandfrei, aber nach der Veröffentlichung in Azure war der Typ .woff der einzige, der Probleme bereitete.
Kevin Cloet
56

-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');
}
CrazyPaste
quelle
3
Ich denke, 70% von Glyphicon funktionieren in diesem Fall nicht, tolle Antworten, ich habe oft Bootstrap-CSS-Dateien in CSS / Bootstrap abgelegt. Verschieben Sie sie einfach auf CSS und alles funktioniert
Andiana
1
Nun, der Weg für mich sieht genau so aus, wie er von Ihnen vorgeschrieben wurde, aber er funktioniert immer noch nicht für mich. Das Quellpaket wird auch nicht heruntergeladen und die Schriftdateien werden nicht ersetzt. Ich muss hinzufügen, dass einige Glyphicons geladen werden, während andere dies nicht tun. Kannst du helfen?
Darth Coder
Wo ist der Schriftordner, den ich nicht habe?
Swift
Außerdem muss der cssOrdner 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 namens cssund 3) die Schriftdateien in einem Unterordner namens haben fonts.
Kivi Shapiro
Dies macht beim Laden von CDN keinen Unterschied. Nur beim Laden vor Ort. Hinzufügen eines Links, um //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.csses für mich zu lösen.
James Wilkins
47

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://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

Chris Tudor
quelle
23

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>
Caner
quelle
21

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.

Rollerlord
quelle
Das Customizer-Problem wurde vor langer Zeit behoben. Im aktuellen Bootstrap ist dies kein Problem mehr.
Cvrebert
1
Heutzutage treten wahrscheinlich stattdessen Probleme mit der Position von
Symbolschriftarten auf
Es gibt bestimmte Dinge, die Sie für dieses Problem überprüfen sollten. - Überprüfen Sie diese MIME-Typen in IIS für Ihre Site. Es muss für eines der oben genannten Probleme vorhanden sein ... - application/vnd.ms-fontobject- .eot - application/x-font-woff- .woff - application/x-font-ttf- .ttf - image/svg+xml- .svg
pedram
Meine Glyphicons funktionieren in allen Browsern außer IE. IE zeigt sie beim ersten Laden an - drücken Sie F5 und wird dann nicht mehr angezeigt. Das DOM ist korrekt, das angewendete CSS ist korrekt. Ich kann keine Lösung finden. Ideen?
Skychan
1
Ich kann das CSS "content:" \ e080 "" aktivieren / deaktivieren, das den Inhalt auf ein bestimmtes Zeichen setzt. Wenn ich das mache, ändert sich die Größe der Spanne physisch von etwas zu nichts und zurück. Es fühlt sich also wirklich wie ein IE-Fehler an - der Charakter kann nicht gezeichnet werden.
Skychan
18

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> 
Anton Kalcik
quelle
woff, woff2 and ttfErweiterungen?
Kiquenet
16

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');
}
dball
quelle
1
Wenn Sie WENIGER verwenden, können Sie es einfach in Ihrer weniger-Datei überschreiben und die URLs so ändern, dass sie mit den relativen Pfaden aus Ihrer gen'd CSS-Datei übereinstimmen, oder sie rooten.
Chris Searles
Dies sollte mit der neuesten Version von Bootstrap kein Problem mehr sein. Aktualisieren!
Ball
11

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

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

Vielen Dank.

Y. Joy Ch. Singha
quelle
Hier fehlen viele der neueren Symbole, die in späteren Versionen von Version 3 hinzugefügt wurden.
James Wilkins
Perfekte Antwort für mich jedenfalls.
Thonnor
8

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>
Steve Cooper
quelle
Dies lässt sich viel besser skalieren, als dass Sie daran denken müssen, dies für jeden IIS-Computer zu konfigurieren. Nette Erwähnung
Matty Bear
Sie sollten Ihren Mimetyp gemäß den aktuellen Standards auf "application / font-woff" aktualisieren
Always Learning
application / font-woff gegen application / x-woff ?
Kiquenet
7

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
Vicky
quelle
Dies ist die richtige Antwort. Eine Person kann den richtigen Ordner zum Platzieren dieser Dateien finden, indem sie Xenus Link-Sleuth verwendet: home.snafu.de/tilman/xenulink.html
Nav
2
Es gibt jedoch Personen, die alle diese Dateien im Ordner "Schriftarten" haben, aber dennoch diesen Fehler erhalten, wenn der MIME-Typ "woff" nicht bei IIS registriert ist.
Stack0verflow
Schriftartenverzeichnis ist erforderlich? Ich habe nur bootstrap.css und bootstrap.js
Kiquenet
7

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

Cesar Hernandez
quelle
2
Für Bootstrap-Sass 3.2.0.1 Gem scheint es zu brauchen $icon-font-path: "/assets/bootstrap/".
Joshua Muheim
Auf jeden Fall die Art und Weise, mit Bootstrap zu arbeiten und nicht dagegen.
Der Hampster
6

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.

prinsen
quelle
6

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.

Jo Smo
quelle
Vielen Dank! Nachdem ich mich über 4 Stunden am Kopf gekratzt und zahlreiche verschiedene Dinge ausprobiert hatte, fiel mir ein, dass ich eine Schriftart auf "span" mit "wichtig" hinzugefügt hatte. Entfernte es und alles ist wieder normal ..
Ali Haider
5

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>
TWiStErRob
quelle
5

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

Aaron
quelle
5

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.

Victor Häggqvist
quelle
4

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.

kross
quelle
4

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

Tore
quelle
Ich habe es versäumt, den Schriftartenordner zu kopieren. Ich weiß nicht, wo er sich befindet. Kann mir jemand helfen?
Swift
3

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/";
Aaron
quelle
Dies half mir zu erkennen, dass ich meine Pfadvariable geknackt habe ... zufällig, aber ja, danke!
Taylor A. Leach
3

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.

Eric
quelle
3

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 ...

Pierre-Olivier Pignon
quelle
Alter, das war auch mein Problem mit dem CDN
Richard Barker
3

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

*{font-family: Verdana;}

entfernt die Halbling-Schriftart aus i-Elementen.

S ..
quelle
3

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.

worldofjr
quelle
2

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>
Nenad
quelle
2

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');
}
Tabi Vicuna
quelle
2
@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.

Ratan Paul
quelle
2

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

Lanlan82
quelle