Cdnjs: Font Awesome funktioniert nicht in Firefox (mögliche Lösung gefunden)

Erstellt am 10. Jan. 2013  ·  26Kommentare  ·  Quelle: cdnjs/cdnjs

Hallo, bei der Verwendung von Font Awesome habe ich festgestellt, dass die Zeichen in Firefox nicht so dargestellt werden, wie sie sollten, während sie in Chrome und Safari gut funktionieren.

Nach einigem Suchen scheint dies ein häufiges Problem zu sein, ich habe diesen Vorschlag gefunden:

http://blog.netdna.com/opensource/font-awesome-firefox-bug-fix/

Könnten Sie möglicherweise die absoluten Pfade anstelle der relativen Pfade zur CSS-Datei hinzufügen?

Vielen Dank

Hilfreichster Kommentar

Ich habe einige Tests durchgeführt und eine Lösung gefunden.

Die Entwicklungskonsole von FF zeigt dies beim Laden der Schriftart awsome css:

[09:29:21.785] downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/font/fontawesome-webfont.woff @ http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/css/font-awesome.min.css

Der Server sollte die richtigen Header angeben, um den Zugriff zu ermöglichen (erhalten von: https://github.com/netdna/bootstrap-cdn/issues/27):

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Dies _sollte_ das Problem beheben. Wenn dies immer noch nicht der Fall ist, sollten die URLs für die Schriftartdateien im CSS ebenfalls auf relativ geändert werden

Alle 26 Kommentare

Ich habe das versucht und aus der Rohdatei meines Zweigs getestet, aber irgendwie funktioniert es nicht. Und alle meine Schriftarten zeigen jetzt Quadrate. Hast du das versucht?

https://github.com/bfintal/cdnjs/blob/font-awesome-ff-patch/ajax/libs/font-awesome/3.0.0/css/font-awesome.min.css

Vielleicht würde es auch funktionieren, wenn Sie dies zum cdnjs-Server hinzufügen: http://www.wpthemehelp.com/knowledgebase/font-icons-not-working/

Hallo Jami,
Danke für die Information. Wir werden uns darum kümmern :)

Am Donnerstag, den 10. Januar 2013 um 22:22 Uhr schrieb Jami Intal [email protected] :

Vielleicht würde es auch funktionieren, wenn Sie dies zum cdnjs-Server hinzufügen:
http://www.wpthemehelp.com/knowledgebase/font-icons-not-working/


Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHubhttps://github.com/cdnjs/cdnjs/issues/755#issuecomment -12092131 an.

Ich habe einige Tests durchgeführt und eine Lösung gefunden.

Die Entwicklungskonsole von FF zeigt dies beim Laden der Schriftart awsome css:

[09:29:21.785] downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/font/fontawesome-webfont.woff @ http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/css/font-awesome.min.css

Der Server sollte die richtigen Header angeben, um den Zugriff zu ermöglichen (erhalten von: https://github.com/netdna/bootstrap-cdn/issues/27):

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Dies _sollte_ das Problem beheben. Wenn dies immer noch nicht der Fall ist, sollten die URLs für die Schriftartdateien im CSS ebenfalls auf relativ geändert werden

@bfintal Diese Informationen sind fantastisch, Kumpel, vielen Dank.

@bfintal Danke an die großartigen Jungs von CloudFlare, das sollte alles gut gehen :)

Versuchen Sie, Ihren Cache zu aktualisieren und zu testen. Lassen Sie mich wissen, wie es geht.

Schön, dass es jetzt funktioniert! (höchstwahrscheinlich auch für IE). Danke Ryan und ClourFlare! :)

Danke Leute. Funktioniert ein Genuss.

Die Eingabe des absoluten Pfads löste dieses Problem für mich. Danke!

Nun, das ist ein offizielles Htacess-Beispiel, das von maxcdn bereitgestellt wird, es hat eine Lösung für Font Awesome und auch für Geschwindigkeit in Bezug auf Probleme. http://support.netdna.com/tutorials/htaccess-examples/ oder sehen Sie sich diese Anleitung an http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/

Aber ich weiß nicht, ob es mit Cloudflare funktioniert.

Dank @terinjokes haben wir jetzt CORS-Unterstützung!

Danke für die nette Erklärung zu Font Awesome - Mozilla Problembehebung.
Ich bin auch auf diesen nützlichen Artikel gestoßen ...
http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/
Guck mal...

Laden Sie im Schriftartenordner bitte die folgenden Dateien hoch

FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
------------------ Wichtige glyphicons-Dateien----------------
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Bitte lade die folgenden Dateien hoch und verlinke danach deine font-awesome.min.css in deiner Header-Datei.

Hier ist der folgende Link mit den richtigen Dateien:
http://goo.gl/WICQAf

Hallo zusammen.
Ich habe festgestellt, dass Font Awesome in FF nicht funktioniert.
Könnt ihr mir bitte helfen wie ich vorgehen soll?

@blueror815 Wenn es keine Detailinformationen gibt, wie können wir Ihnen helfen?

Danke an alle die dazu beigetragen haben!!! Dies hat das Problem für mich behoben, indem es zur .hta-Datei hinzugefügt wurde.


Header-Set Access-Control-Allow-Origin "*"

:+1: Schön

@ Subhojit1992 Danke, es funktioniert. Ich habe die CSS & Schriftarten von dem angegebenen Link heruntergeladen. Jetzt funktioniert es einwandfrei :+1:

CDNJS stellt seit einiger Zeit Font Awesome-Schriftdateien mit Access-Control-Allow-Origin "*" bereit. Ich kann in bestimmten Fällen nachsehen, wenn mehr Details gegeben werden.

Ich habe den gleichen Fehler mit Firefox (funktioniert gut in allen anderen Browsern). FontAwesome-Symbole werden als rechteckige Kästchen mit Unicode-Zeichencode darin angezeigt.

Der Fehler steht nicht mehr im Zusammenhang mit CDNJS und ist jetzt ein Problem in Firefox. FontAwesome-Dateien (CSS und WOFF) werden problemlos mit 200 OK vom CDN geladen.

Das Problem wird dadurch verursacht, dass Firefox Unicode nicht richtig anzeigt, wenn ein ungewöhnliches Unicode-Zeichen wie  direkt in das Markup eingefügt wird. Es funktioniert, wenn Sie ein Pseudo-Element und Inhalt verwenden, z. B.:

yourelement::before {
    content: '\f067';
    font-family: FontAwesome;
}

@J3QQ4 Danke für deinen Bericht!

@ Subhojit1992 Vielen Dank ... mit Ihrer Lösung habe ich dieses Problem behoben ...

Kann mir bitte jemand sagen, was ich tun soll, weil meine benutzerdefinierten Schriftarten in FF nicht einmal auf meinem lokalen HTML-Code funktionieren und den gleichen Fehler "herunterladbare Schriftart: Download fehlgeschlagen (Schriftfamilie: "gotham_lightregular" style:normal weight:normal stretch:normal src index:1): Ungültiger URI oder Cross-Site-Zugriff nicht erlaubt Quelle:" Ich kann hier nicht einmal .htaccess-Code anwenden.

@thakurpunk Entschuldigung für die späte Antwort, würden Sie uns bitte die URL(s) geben, mit denen Sie ein Problem haben (ein paar Beispiele)?

Lief wie am Schnürchen !
Problem gelöst Vielen Dank :)
Das Hinzufügen zur .htaccess-Datei löste es>

Header-Set Access-Control-Allow-Origin "*"

Hallo Freunde!
Kopieren Sie das HTML-Formular auf dieser Seite in Ihre index.html :
https://www.bootstrapcdn.com/fontawesome/
viel Glück :)

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

PeterDaveHello picture PeterDaveHello  ·  6Kommentare

carrbrpoa picture carrbrpoa  ·  4Kommentare

truekasun picture truekasun  ·  5Kommentare

BorisMoore picture BorisMoore  ·  4Kommentare

balihoo-dengstrom picture balihoo-dengstrom  ·  5Kommentare