I font icoMoon non vengono visualizzati su Firefox

Question

Alcuni problemi con i browser cross-browser con i font di sostituzione delle icone su Firefox, al momento mostrano solo il testo del contenuto ma non la sostituzione del testo di icomoon. Il codice sorgente mostrato dal codice Sass + Magento + .htaccess, qualsiasi idea o aiuto sarebbe molto apprezzato.

Sito web: http://www.phoebessecret.co.nz

avesse fatto riscrittura di .htaccess:

AddType image/svg+xml svg svgz 
AddEncoding gzip svgz 
AddType application/vnd.ms-fontobject eot 
AddType font/truetype ttf 
AddType font/opentype otf 
AddType application/x-font-woff woff 

<FilesMatch ".(ttf|otf|eot|woff)$"> 
<IfModule mod_headers.c> 
Header set Access-Control-Allow-Origin "*" 
Header set Access-Control-Allow-Origin "http://www.phoebessecret.co.nz" 
Header set Access-Control-Allow-Origin "http://skin.phoebessecret.co.nz" 
Header set Access-Control-Allow-Origin "http://js.phoebessecret.co.nz" 
Header set Access-Control-Allow-Origin "http://media.phoebessecret.co.nz" 
</IfModule> 
</FilesMatch> 

CSS:

@font-face { 
font-family: 'topshops'; 
src:url('../fonts/topshops.eot'); 
src:url('../fonts/topshops.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/topshops.svg#topshops') format('svg'), 
    url('../fonts/topshops.woff') format('woff'), 
    url('../fonts/topshops.ttf') format('truetype'); 
font-weight: normal; 
font-style: normal;} 

.icon-fonts { 
    font-family: 'topshops'; 
    font-style: normal; 
    speak: none; 
    -webkit-font-smoothing: antialiased; 
    font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
    font-weight: 400; 
} 

.iconsearch { 
    content: "\61"; 
} 

Answer 1

stavo avendo problemi con icomoon e Firefox come w ell. Hai provato Paul Irish's 'bulletproof' @font-face syntax? È un po 'diverso da quello che produce l'icomoon e ho avuto più fortuna con esso - nessun problema FF da allora.

@font-face { 
    font-family: 'Graublau Web'; 
    src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); 
} 

Answer 2

Prova ad aggiungere questo al tuo file .htaccess. Dovrebbe risolvere il tuo problema. Ha riparato il mio.

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

Answer 3

Ho avuto lo stesso problema (con un'installazione di Wordpress), le icone di icomoon non venivano visualizzate in Firefox. Chrome, Safari, IE hanno funzionato bene.

Dopo che il sito era attivo e funzionante, il client mi ha chiesto di includere www nell'URL, anziché solo http: //. Così ho cambiato l'indirizzo del blog, ma non l'indirizzo di Wordpress (nella Dashboard di Wordpress). All'improvviso tutte le icone di Icomoon erano sparite. Dopo aver aggiunto www all'indirizzo Wordpress, le icone erano tornate.

Answer 4

Ci sono due cose che puoi provare. Ho usato entrambi e ha funzionato per me. Utilizza i collegamenti completi nel tuo file CSS per fare riferimento a icomoon. Il tuo .htaccess potrebbe riscrivere l'URL. In secondo luogo aggiungere il seguente file .htaccess proprio come indicato da webkub.

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

Answer 5

Se stai usando IIS, che ci si vuole modificare la web.config e, probabilmente, aggiungere la sezione httpProtocol come illustrato di seguito:

<?xml version="1.0" encoding="utf-8"?> 
    <configuration> 
    <system.webServer> 
     <httpProtocol> 
     <customHeaders> 
      <add name="Access-Control-Allow-Origin" value="*" /> 
     </customHeaders> 
    </httpProtocol> 
    </system.webServer> 
    </configuration>