Cdnjs: Font Awesome ne fonctionne pas dans Firefox (correction possible trouvée)

Créé le 10 janv. 2013  ·  26Commentaires  ·  Source: cdnjs/cdnjs

Bonjour, lors de l'utilisation de Font Awesome, j'ai constaté que dans Firefox, les caractères ne s'affichaient pas comme ils le devraient alors qu'ils fonctionnent correctement dans Chrome et Safari.

Après quelques recherches autour de cela semble un problème commun, j'ai trouvé cette suggestion:

http://blog.netdna.com/opensource/font-awesome-firefox-bug-fix/

Pourriez-vous éventuellement ajouter les chemins absolus plutôt que les chemins relatifs au fichier css ?

Merci beaucoup

Commentaire le plus utile

J'ai fait quelques tests et j'ai trouvé une solution.

La console de développement de FF le montre lors du chargement de la police css awsome :

[09:29:21.785] downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/font/fontawesome-webfont.woff @ http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/css/font-awesome.min.css

Le serveur doit donner les en-têtes appropriés pour autoriser l'accès (obtenu de : https://github.com/netdna/bootstrap-cdn/issues/27) :

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

Cela devrait résoudre le problème. Si ce n'est toujours pas le cas, les URL des fichiers de police dans le CSS doivent également être modifiées en relatives

Tous les 26 commentaires

J'ai essayé ceci et testé à partir du fichier brut de ma branche, mais d'une manière ou d'une autre, cela ne fonctionne pas. Et toutes mes polices affichent maintenant des carrés. Avez-vous essayé cela?

https://github.com/bfintal/cdnjs/blob/font-awesome-ff-patch/ajax/libs/font-awesome/3.0.0/css/font-awesome.min.css

Peut-être que l'ajout de ceci au serveur cdnjs le ferait également fonctionner: http://www.wptemehelp.com/knowledgebase/font-icons-not-working/

Salut Jami,
Merci pour l'info. Nous allons nous pencher dessus :)

Le jeudi 10 janvier 2013 à 22h22, Jami Intal [email protected] a écrit :

Peut-être que l'ajout de ceci au serveur cdnjs le ferait également fonctionner :
http://www.wptemehelp.com/knowledgebase/font-icons-not-working/


Répondez directement à cet e-mail ou consultez-le sur Gi tHubhttps://github.com/cdnjs/cdnjs/issues/755#issuecomment -12092131.

J'ai fait quelques tests et j'ai trouvé une solution.

La console de développement de FF le montre lors du chargement de la police css awsome :

[09:29:21.785] downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/font/fontawesome-webfont.woff @ http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/css/font-awesome.min.css

Le serveur doit donner les en-têtes appropriés pour autoriser l'accès (obtenu de : https://github.com/netdna/bootstrap-cdn/issues/27) :

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

Cela devrait résoudre le problème. Si ce n'est toujours pas le cas, les URL des fichiers de police dans le CSS doivent également être modifiées en relatives

@bfintal Cette information est fantastique mon pote, merci beaucoup.

@bfintal Merci aux gars géniaux de CloudFlare, tout devrait bien se passer :)

Essayez de rafraîchir votre cache et de tester. Faites-moi savoir comment ça se passe.

Super ça marche maintenant ! (très probablement pour IE aussi). Merci Ryan et ClourFlare ! :)

Merci les gars. Fonctionne un régal.

Entrer dans le chemin absolu a résolu ce problème pour moi. Merci!

Eh bien, il s'agit d'un exemple htaccess officiel fourni par maxcdn, il a une solution pour la police géniale et aussi pour la vitesse concernant les problèmes. http://support.netdna.com/tutorials/htaccess-examples/ ou consultez ce guide http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/

Mais je ne sais pas si cela fonctionnera avec cloudflare.

Grâce à @terinjokes, nous avons maintenant le support CORS !

Merci pour la belle explication sur la police géniale - résolution des problèmes de Mozilla.
Je suis aussi tombé sur cet article utile...
http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/
Regarde...

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 glyphicons importants ------------------
glyphicons-halfelins-regular.eot
glyphicons-halfelins-regular.svg
glyphicons-halfelins-regular.ttf
glyphicons-halfelins-regular.woff

Veuillez télécharger les fichiers suivants et après cela, 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

Salut tout le monde.
J'ai trouvé que la police géniale ne fonctionnait pas dans FF.
Pourriez-vous m'aider s'il vous plaît comment je dois faire?

@ blueror815 s'il n'y a pas d'informations détaillées, comment pouvons-nous vous aider ?

Merci à tous ceux qui ont contribué !!! Cela l'a corrigé pour moi en ajoutant au fichier .hta.


Jeu d'en-tête Access-Control-Allow-Origin "*"

:+1: sympa

@ Subhojit1992 Merci, ça marche. J'ai téléchargé le css et les polices à partir du lien donné. ça marche bien maintenant :+1:

CDNJS a servi des fichiers de police Font Awesome avec Access-Control-Allow-Origin "*" depuis un certain temps maintenant. Je peux examiner des cas spécifiques si plus de détails sont donnés.

J'ai le même bug avec Firefox (fonctionne bien dans tous les autres navigateurs). Les icônes FontAwesome s'affichent sous forme de boîtes rectangulaires avec un code de caractère Unicode à l'intérieur.

Le bogue n'est plus lié à CDNJS et est maintenant un problème dans Firefox. Les fichiers FontAwesome (css et woff) se chargent très bien à partir du CDN avec un 200 OK.

Le problème est dû au fait que Firefox n'affiche pas correctement Unicode lorsqu'un caractère Unicode inhabituel tel que  est inséré directement dans le balisage. Cela fonctionne lorsque vous utilisez un pseudo élément et un contenu, par exemple :

yourelement::before {
    content: '\f067';
    font-family: FontAwesome;
}

@J3QQ4 Merci pour votre rapport !

@ Subhojit1992 Merci beaucoup .. avec votre solution, j'ai résolu ce problème ..

Quelqu'un peut-il me dire quoi faire car mes polices personnalisées ne fonctionnent pas dans FF même sur mon html local, affichant la même erreur "police téléchargeable : échec du téléchargement (font-family : "gotham_lightregular" style : poids normal : étirement normal : normal src index : 1) : mauvais URI ou accès intersite non autorisé source : " Je ne peux même pas appliquer le code .htaccess ici.

@thakurpunk désolé pour la réponse tardive, pourriez-vous nous donner la ou les URL qui vous posent problème (quelques exemples) ?

A fonctionné comme un charme!
Problème résolu merci beaucoup :)
L'ajout de ceci au fichier .htaccess l'a résolu>

Jeu d'en-tête Access-Control-Allow-Origin "*"

salut les amis!
copiez le formulaire HTML de cette page dans votre index.html :
https://www.bootstrapcdn.com/fontawesome/
Bonne chance :)

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

carrbrpoa picture carrbrpoa  ·  4Commentaires

lucasRolff picture lucasRolff  ·  4Commentaires

PeterDaveHello picture PeterDaveHello  ·  6Commentaires

olafcm picture olafcm  ·  5Commentaires

ogewan picture ogewan  ·  6Commentaires