Font Awesome non funziona in Firefox e IE

Question

Sto riscontrando un problema con font impressionante che è incluso in un sito wordpress. In Firefox e IE le icone non verranno mostrate affatto, tuttavia in Chrome & Safari funziona correttamente.

Ho trovato "soluzioni" che dicono che ho bisogno di un .htaccess con determinati contenuti per fornire supporto per questi browser, tuttavia, se utilizzo questo approccio, Safari e Chrome hanno improvvisamente problemi e Firefox e IE non sono ancora lavoro.

Qualcuno ha qualche ulteriore idea?

Ecco il messaggio di errore messo fuori dal log degli errori dev firefox quando si carica il mio sito:

Fehler: font scaricabile: mancato download (font-family: "icomoon" stile: peso normale: tratto normale : normale indice di src: 2): bad URI o l'accesso cross-sito non ammessi fonte: 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"; stile font: normale; font-weight: normal; formato src: url ("fonts/icomoon/icomoon.eot? #iefix") ("embedded-opentype"), url ("fonts/icomoon/icomoon.svg # icomoon") format ("svg"), url (" fonts/icomoon/icomoon.woff ") format (" woff "), url (" fonts/icomoon/icomoon.ttf ") format (" truetype "); }

Grazie per il vostro aiuto!

P.S. A proposito, le icone sul fantastico sito Web dei font funzionano bene in FF.

• UPDATE *

ok dopo aver letto un sacco di post del forum su questo tema sono giunto alla seguente conclusione: maggior parte delle persone stanno avendo questo problema perché essi stanno caricando i loro font da server esterni . aggiungendo il codice .htaccess per consentire a FF di fare proprio questo, stanno risolvendo il problema. ora, dal momento che sto caricando i miei font dal mio server, l'approccio .htaccess non mi ha aiutato. ciò che ha eliminato il messaggio di errore mostrato sopra, tuttavia, stava cambiando il percorso del carattere nel css da un parente ad un percorso assoluto. ora la cosa divertente è che il messaggio di errore non viene più visualizzato durante il caricamento del sito, ma neanche le icone! ancora nessun cambiamento, ancora nessun messaggio di errore. Non ho capito bene!

• UPDATE 2 *

ho trovato una soluzione -

Dopo aver modificato tutti i percorsi nel CSS da relativo ad assoluto (cioè www.mysite.de/fonts/... invece di/fonts/...) e aggiungendo il file .htaccess che contiene le seguenti righe:

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

alla directory/fonts, tutto funziona bene in Firefox, Chrome e Safari. Non ho ancora avuto la possibilità di controllare IE, ma sembra che questo fosse il problema.

Speranza qualcuno che corre negli stessi problemi sarà avere un aiuto da questo.

Answer 1

Se siete come me, la modifica di un file web.config è qualcosa che non ti è permesso di toccare.

Provare a memorizzare tutti i file di carattere (.eot, .ttf, ecc.) Nella propria cartella locale e collegarsi a loro localmente anziché il CDN FontAwesome. Ripulito ogni volta da IE e FF per me.

@font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); } 

Answer 2

So che questo è un vecchio post, ma mi ha aiutato a capire alcuni problemi.

Ho la configurazione standard di apache e mod_headers abilitati.

Ho una cartella /font/ nel DOCUMENT_ROOT, aggiungendo un .htaccess in tale cartella (<DOCUMENT_ROOT>/font/.htaccess) con il contenuto suggerito da Markus lavorato su tutti i browser:

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

Answer 3

è necessario aggiungere una regola locale se vuoi che Firefox usi il font quando è installato sul computer. Vedi 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"> 

Aggiungi questa linea al file header.php del tema che si sta utilizzando. Questa correzione ha funzionato per me.