Firefox ne peut pas rendre les icônes du jeu de polices Web Font Awesome

Dans Firefox (Windows 7), les icônes et les glyphes appelés à partir du package Font Awesome ne s'affichent pas correctement. Un exemple de cela peut être vu sur le site Web de la Khan Academy. Sous la vidéo, les icônes sont représentées sous forme de cases contenant des codes hexadécimaux. Cela signifie qu'il n'est pas téléchargé par Firefox.

Comment cela apparaît sur Chrome (Windows 7), Safari (Mac OS X) et Stainless (Mac OS X):

J'ai trouvé cette question sur Stack Overflow qui peut expliquer pourquoi cela se produit - le CSS utilise des guillemets simples pour entourer l'emplacement src de la police. Cependant, je n'ai aucun accès en écriture aux serveurs de Khan Academy, je ne peux donc pas modifier le site Web réel. Je veux savoir si cela peut être corrigé dans Firefox et comment. Je peux exécuter des scripts Greasemonkey si cela peut aider. J'ai déjà essayé de télécharger manuellement la police et de l'ajouter au dossier Polices de Windows, mais cela n'aide pas.

Pour référence, le CSS qui définit cette police (non traité correctement par Firefox) est:

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

[class^="icon-"]:before,
[class*=" icon-"]:before
{
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  text-decoration:inherit
}

Mise à jour: j'ai constaté que Firefox affiche correctement les icônes basées sur les polices sur le site Web du package Font Awesome (lié ci-dessus). Après inspection du CSS et comparaison avec le CSS de Khan Academy, je trouve que les deux codes sont exactement les mêmes sauf qu'il n'y a pas de point-virgule après le dernier attribut du CSS de KA (si vous ignorez le fait qu'il est compressé). L'absence de point-virgule est-elle à l'origine de ce problème?

Le problème décrit dans la question a été résolu par Khan Academy en changeant tous les chemins de ./à /fonts/(par exemple, les ./fontawesome-webfont.ttfchangements de /fonts/fontawesome-webfont.ttf). Il me semble que Firefox ne peut pas lire les fichiers du répertoire spécial "dot" (qui se réfère simplement au répertoire courant).

PS: L'absence de point-virgule dans le CSS après le dernier attribut ne pose pas ce problème.

Commentaires supplémentaires:

Votre modification concernant le .préfixe est un problème de serveur, pas la façon dont Firefox gère les fichiers. KA faisait référence aux fichiers de police au mauvais endroit - aléatoire

Incorrect! Les polices fonctionnaient correctement dans trois autres navigateurs, comme je l'avais déjà mentionné en question il y a longtemps, ce qui signifie que les polices étaient au bon endroit. C'était clairement le problème de Firefox avec le ./chemin comme je l'ai expliqué, ce qui a forcé KA à déplacer les fichiers de police vers un nouvel emplacement qui n'en a pas besoin ./, permettant à Firefox de lire également les fichiers de police correctement. Par conséquent, il s'agit de la façon dont Firefox gère les fichiers.

Probablement pas la réponse à la question posée, mais suffisamment liée pour aider les personnes qui se retrouvent ici avec un problème légèrement différent qui produit le même résultat que celui montré dans les captures d'écran.

Firefox bloque l'utilisation d'une police qui se trouve sur un (sous-) domaine différent

Lisez également les commentaires sur ces messages, ils donnent de bons conseils.

J'ai fait les changements de chemin pour exécuter correctement IE, Firefox et Chrome, comme suit: ( URL à voir )

@font-face{
  font-family:'FontAwesome';
  src:url('ogi/bete/font/fontawesome-webfont.eot?v=3.0.1');
  src:url('/ogi/bete/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), 
  url('/ogi/bete/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  url('ogi/bete/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal }