Font Awesome funktioniert nicht in Firefox & IE

Question

Ich habe ein Problem mit der Schriftart super, die in einer Wordpress-Website enthalten ist. In Firefox und IE werden die Symbole überhaupt nicht angezeigt, aber in Chrome & Safari funktioniert es gut.

Ich habe "Lösungen" gefunden, die sagen, dass ich eine .htaccess mit bestimmten Inhalten brauche, um diese Browser zu unterstützen, aber wenn ich diesen Ansatz verwende, haben Safari und Chrome plötzlich Probleme selbst und Firefox und IE sind immer noch nicht Arbeiten.

Hat jemand weitere Ideen? Hier

ist die Fehlermeldung durch das firefox dev Fehlerprotokoll löscht, wenn meine Seite laden:

Fehler: herunterladbare Schrift: Download fehlgeschlagen (font-family: "icomoon" style: normal weight: normal Strecke : normal src Index: 2): schlechte URI oder Cross-Site-Zugriff Quelle nicht erlaubt: http://mysite.de/wp-content/themes/heat/fonts/icomoon/icomoon.woff Quelldatei: http://mysite.de/wp-content/themes/heat/style.css Zeile: 0 Quelltext: @ font-face {font-family: "icomoon"; Schriftschnitt: normal; Schriftgewicht: normal; src: url ("fonts/icomoon/icomoon.eot? #iefix") format ("eingebettet-opentype"), url ("fonts/icomoon/icomoon.svg # icomoon") format ("svg"), url (" fonts/icomoon/icomoon.woff ") format (" woff "), url (" fonts/icomoon/icomoon.ttf ") format (" truetype "); }

Danke für Ihre Hilfe!

P.S. Die Icons auf der tollen Webseite funktionieren übrigens auch in FF.

• UPDATE *

ok, nachdem zu diesem Thema viele Forenbeiträge lesen i zu dem Schluss gekommen sind: die meisten Menschen haben dieses Problem, weil sie ihre Schriftarten von einem externen Server geladen werden . Indem sie den .htaccess-Code hinzufügen, damit FF genau das tun kann, lösen sie ihr Problem. Jetzt, da ich meine Schriftarten von meinem eigenen Server lade, half mir der .htaccess-Ansatz nicht. Die oben gezeigte Fehlermeldung löste jedoch den Pfad zur Schriftart in der CSS von einem relativen zu einem absoluten Pfad. jetzt ist das komische Ding - die Fehlermeldung erscheint nicht länger beim Laden der Seite, aber die Symbole auch nicht! noch keine Änderung, aber keine Fehlermeldung. Ich bin verwirrt!

• UPDATE 2 *

I eine fix gefunden -

Nachdem alle Pfade in der CSS aus relativ zum absoluten Wechsel (dh www.mysite.de/fonts/... statt nur/fonts/...) und das Hinzufügen der .htaccess-Datei mit den folgenden Zeilen:

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

zum/fonts, funktioniert alles einwandfrei in Firefox, Chrome und Safari. Ich hatte noch keine Gelegenheit, IE zu überprüfen, aber es scheint, dass dies das Problem war.

Hoffe, dass jemand, der in die gleichen Probleme läuft, etwas Hilfe von diesem bekommen wird.

Answer 1

Wenn Sie wie ich sind, ist es nicht erlaubt, eine Datei web.config zu ändern.

Versuchen Sie, alle Schriftartendateien (.eot, .ttf usw.) in einem eigenen lokalen Ordner zu speichern und verknüpfen Sie sie lokal anstelle der FontAwesome-CDN. Habe es in IE und FF für mich jedes Mal gelöscht.

Answer 2

Ich weiß, das ist ein alter Beitrag, aber es hat mir geholfen, einige Probleme zu lösen.

Ich habe die Standard-Apache-Konfiguration und mod_headers aktiviert.

Ich habe einen /font/ Ordner im DOCUMENT_ROOT, ein .htaccess in einem solchen Ordner (<DOCUMENT_ROOT>/font/.htaccess) mit den von Markus vorgeschlagen Hinzufügen von Inhalten gearbeitet allen Browsern:

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

Answer 3

Sie müssen eine lokale Regel, wenn Sie hinzufügen möchte, dass Firefox die Schriftart verwendet, wenn sie auf dem Computer installiert ist. Siehe https://developer.mozilla.org/Web/CSS/@font-face.

@font-face { font-family: 'FontAwesome'; src: local(''FontAwesome'); } 

Answer 4

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"> 

folgende Zeile in die Datei header.php des Themas hinzufügen Sie verwenden. Dieser Fix hat für mich funktioniert.