web-dev-qa-db-fra.com

Police géniale ne fonctionne pas dans Firefox

J'utilise bootstrap et j'ai ajouté une police géniale via Less, en remplaçant les glyphiques. Les icônes affichent OK en chrome mais dans Firefox, je ne vois que des cases.

Voici à quoi ressemble mon répertoire

-- Project
  -- js
  -- css
  -- less
  -- font-awesome
    -- css
    -- font
    -- less

Tout ce que j'ai modifié dans le fichier Project > less > boostrap.less a été:

@import "sprites.less";

//for this line

@import "../font-awesome/less/font-awesome.less";

Comme je l’ai dit dans Chrome, cela fonctionne bien, mais pour une raison quelconque, Firefox n’affiche que des cases.

firefoxtwitter-bootstraplessfont-awesome
19
filistea

Les polices Web personnalisées via CDN (ou toute demande de police entre domaines) ne fonctionnent pas dans Firefox ou Internet Explorer (correctement, par spécification) bien qu'elles fonctionnent (à tort) dans les navigateurs Webkit.

Vous pouvez résoudre ce problème en ajoutant des en-têtes à votre page.

Apache

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

Nginx

    if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
        add_header Access-Control-Allow-Origin *;
    }

Crédit: http://davidwalsh.name/cdn-fonts

27
Dustin Brownell

Si vous voulez un moyen rapide et facile d’utiliser Font-awesome, essayez d’utiliser CDNJS . C'est gratuit et optimisé par CloudFlare. CORS est pris en charge hors de la boîte.

Essayez quelque chose comme ça:

<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">
24
premjg

Si vous hébergez la police sur S3, vous devez activer CORS sur le compartiment. Via AWS Management Console, modifiez les propriétés du compartiment et sous Autorisations, cliquez sur "Ajouter une configuration CORS". Dans mon cas, si je laissais la configuration par défaut, elle ne fonctionnait toujours pas, alors je la changeai pour:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>
9
Ruy Diaz

J'avais un problème avec l'instruction if parce que je n'avais pas de variable $ filename. 

Mais j'ai eu des résultats similaires en utilisant:

location ~ /\.(eot|otf|ttf|woff)$ {
        add_header Access-Control-Allow-Origin *;
    }
6
fyberoptik

L'utilisation d'un CDN comme première suggestion est la méthode la moins invasive, outre son hébergement. La dernière version de fontawesome suggère bootstrapcdn , par exemple,

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Comme remarque mineure, noscript bloque silencieusement les demandes adressées au CDN sauf si la liste est blanche, et. Il ne vous invite pas à ajouter le CDN à la liste blanche, à moins que votre page demande également des fichiers JS du même domaine. 

4
A Lee

Si vous êtes comme moi, vous ne pouvez pas toucher à un fichier web.config.

Essayez de stocker tous les fichiers de polices (.eot, .ttf, etc.) dans leur propre dossier local et créez un lien vers eux localement au lieu du CDN FontAwesome. Je l'ai éclairci dans IE et FF à chaque fois.

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

J'ai mis le code dans .htaccess

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

Cela fonctionne bien maintenant. Merci. Apprécier ton aide

1
user3610713

Si vous utilisez wordpress et pensez que vous avez tout essayé, regardez si vous avez déjà installé un plugin Font Awesome. Désactivez le plug-in et actualisez-le dans Firefox.

C'était la solution pour moi - l'ancienne version de font-awesome du plugin remplaçait les fichiers que j'essayais de mettre à jour moi-même manuellement.

0
bkbeachlabs

Dans le dossier des polices, veuillez télécharger les fichiers suivants

FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
------------------ Fichiers glyphiques importants ----------------
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

S'il vous plaît télécharger les fichiers suivants et ensuite vous liez votre font-awesome.min.css dans votre fichier d'en-tête. 

Voici le lien suivant avec les fichiers appropriés: http://goo.gl/WICQAf

0
Subhojit Mondal