FontAwesome ne s'affiche pas dans Firefox
Question connexe ici .
La réponse de Boris à la question ci-dessus semble logique, mais j'ai installé les fichiers Font Awesome sur mon serveur et le problème persiste:
J'ai regardé dans la bibliothèque et j'ai constaté que les fichiers de polices sont inclus dans l'installation, donc l'argument concernant l'accès inter-serveur aux polices ne semble pas valide. Cela ne me dérange pas d'utiliser le BootstrapCDN, mais la suggestion de Boris semble s'appliquer, et je ne sais pas comment envoyer les bons en-têtes CORS. (Je l'ai essayé, mais cela ne fonctionne pas non plus.) Avez-vous une idée de comment résoudre ce problème, soit en utilisant le "Bootstrap CDN" ou le "CSS par défaut"? (voir aussi ces instructions .)
PS: IE10 affiche correctement le glyphe.
Avez-vous essayé Bootstrap CDN?
Incluez simplement <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> dans ton <head> section. Les fichiers de polices seront également chargés automatiquement à partir du CDN.
Vérifié cela sur Firefox et cela fonctionne parfaitement.
@Boris dit:
Firefox n'autorise la liaison inter-domaines de polices que si le serveur sur lequel la police se trouve envoie les bons en-têtes CORS.
Il est donc clair que c'est le devoir des CDN de définir les bons en-têtes, pas les vôtres . Et ils semblent le faire correctement, car Firefox ne se plaint pas.
Si vous hébergez des polices sur votre propre serveur, gardez à l'esprit que la règle interdomaine peut toujours s'appliquer, par exemple fichiers de polices placés sous domain.com peut être inaccessible depuis www.domain.com, si www.domain.com n'envoie pas les bons en-têtes.
Lisez cette réponse pour obtenir des conseils sur le contournement des restrictions inter-sous-domaines - cela pourrait vous aider dans votre cas.
la solution pour que le CSS Fontawesome fonctionne localement consiste à inclure les fichiers sous le dossier Fonts dans le même répertoire de fichiers .html (pages).
par exemple: la structure des fichiers à partir de maintenant où fontawesome ne fonctionne pas
prototype\pages\.html files
prototype\styles\font-awesome\css\font-awesome.min.css
prototype\styles\font-awesome\css\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff
Le problème ici est que pour une page chargée à partir d'un fichier: // URI, seuls les fichiers dans (ou en dessous) le même répertoire du système de fichiers sont considérés comme "même origine", et donc mettre la police dans un sous-arbre différent (. ./font/) signifie qu'il sera bloqué par des restrictions de politique de sécurité. Comme Firefox désactive les polices inter-domaines "par défaut. Modifiez plutôt la structure du fichier comme ci-dessous:
prototype\pages\.html files
prototype\styles\font-awesome\css\font-awesome.min.css
prototype\pages\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff
placez le dossier des polices dans le répertoire des pages, ce qui résout le problème. J'espère que cela vous aidera.
Si vous êtes le propriétaire de votre propre serveur, vous pouvez ajouter un en-tête http pour résoudre ce problème. Problème basé sur des politiques interdomaines.
foo.com/font-awesome.woff
boo.com/index.htm
dans ce cas, vous devez ajouter cet en-tête à foo.com
Access-Control-Allow-Origin = "http://boo.com"
ou
Access-Control-Allow-Origin = "*"
qui rendra votre fichier de police accessible à partir d'autres sites ou d'un site spécifique.
J'ai le même problème, nous utilisons les polices sur la carte de routeur en utilisant micro httpd. j'ai ajouté Access-Control-Allow-Origin: * en-tête mais ne fonctionne pas pour moi.
j'ai trouvé dans firebug que le fichier woff ne retient rien dans le texte de réponse. la même chose si j'utilise l'URL CDN, tout fonctionne bien. ainsi, le serveur micro-httpd local a besoin d'un en-tête obligatoire pour configurer. veuillez également me dire les types de mime exacts pour toutes les polices nécessaires.
- .ttf "," application/x-font-ttf "
- .eot "," application/vnd.ms-fontobject "
- .woff "," application/font-woff "
- .svg "," image/svg + xml "