Les polices Font Awesome ne fonctionnent pas dans certains navigateurs
J'utilise Bootstrap + Font Awesome et tout va bien avec la plupart des navigateurs de bureau et mobiles, mais les icônes Font awesome ne fonctionnent pas avec certains navigateurs tels qu'Opera Mobile, Opera Mini et certaines versions d'Android Browser . rectangle vide.
Est-ce que quelqu'un sait ce problème? et, y a-t-il une solution?
Merci
[EDIT 2013-03-06! Important] Je n’ai trouvé aucun problème apparent, j’ai donc essayé avec des solutions inédites . J’ai essayé avec deux outils de conversion de polices en ligne. J'ai d’abord utilisé http://www.freefontconverter.com/ pour convertir le fichier original FontAwesome svg en ttf. Ensuite, j'ai utilisé http://www.font2web.com/ pour convertir ce fichier .ttf en fichier .eot, .woof et .otf.
Résultats: Opera Mobile affiche désormais correctement les icônes. (Je ne sais pas quels sont les changements, mais ça marche)
Le problème est maintenant Blackberry 6. J'ai testé @ font-face avec les polices BB Curve 9300, Modernizr et Google et tout va bien. Mais FontAwesome ne fonctionne toujours pas ...
[EDIT 2013-03-01] Opera mobile 10+ prend en charge @ font-face, le problème peut donc être un autre . J'ai essayé avec une autre police de serveur avec @ font-face et fonctionne correctement, mais avec FontAwesome I ne peut pas afficher les icônes correctement.
[EDIT 2013-03-03] Le problème ne vient pas seulement de mon site Web, les exemples et les tests de site Web Font Awesome ne fonctionnent pas ...
[EDIT 2013-03-4] J'ai essayé de me replier à l'aide de la détection de fonctionnalité "font-face" de Modernizr, mais opera Mobile et BlackBerry 6 renvoient true car ils prennent en charge cette fonctionnalité .Comment puis-je détecter si la police FontAwesome est chargée?
J'espère que vous étudierez différents problèmes qui vous aideront à résoudre le problème.
Si vous mentionnez la police qui a fonctionné, nous pourrions probablement mieux vous aider. Je voudrais comparer la police dont vous avez dit avoir travaillé avec FontAwesome pour voir quelles sont les différences. Je parierais que les glyphes sont mappés vers une zone unicode différente et que le navigateur ne lit pas à partir de là?
Vous pouvez utiliser un outil tel que Font Forge pour vérifier les différences avec d’autres polices. J'ai remarqué que lorsque j'essayais de générer de nouveau la police FontAwesome à partir de Font Forge, des erreurs de validation apparaissaient et les glyphes présentaient des erreurs (auto-intersection, direction erronée, points manquants au niveau des extrema). J'ai déjà vu cela dans les polices d'icônes et je n'ai jamais eu de problème, mais je n'ai pas encore testé sur Opera. Si vous comparez le fait d'essayer de générer une police avec quelque chose qui fonctionne, vous pouvez probablement réduire le problème.
Je suis sûr que vous avez couvert mais vérifiez encore:
J'ai lu ici que le fait d'avoir une version locale de la police installée pouvait entrer en conflit avec la police intégrée. https://github.com/FortAwesome/Font-Awesome/issues/247
Si vous avez pris la police-icon, puis y avez ajouté vos propres glyphes, utilisez quelque chose comme police Squirrel pour générer tous les formats Web sécurisés, assurez-vous que le générateur ajoute la plage unicode des glyphes que vous avez créés. Une fois, j'ai oublié de le faire et l'application n'a ajouté que les glyphes dans la plage a-z. Un moyen simple de vérifier consiste à consulter l'onglet des gyphes de la page de démonstration html et à vous assurer que toutes les icônes sont incluses.
Vous utilisez la règle de police de caractères CSS3 appropriée et incorporez eot, ttf, woff et svg et vous avez attendu un peu. J'ai remarqué sur de vieux iphones que la police prend une éternité à afficher.
L'utilisation d'un outil tel que modernizr font-face detect peut permettre de simplifier un peu la prise en charge entre navigateurs.
Je suis curieux de voir quel est le problème.
SOLUTION POUR OPERA MOBILE (Pas d'Opera Mini)
J'ai essayé avec deux outils de conversion de polices en ligne. J'ai d'abord utilisé http://www.freefontconverter.com/ pour convertir l'original de FontAwesome en ttf. Ensuite, j'ai utilisé http://www.font2web.com/ pour convertir ce fichier .ttf en fichier .eot, .woof et .otf.
Enfin, j'ai remplacé les fichiers d'origine et maintenant, Opera Mobile affiche correctement les icônes.
Opera Mini ne prend pas en charge font-face , Comme indiqué sur le site officiel http://www.opera.com/docs/specs/productspecs/
Un petit truc "sale" que je pourrais penser, sera de convertir votre police en SVG et de l’utiliser dans votre CSS car il est partiellement pris en charge (comme il est également écrit sur leur site Web).
Quelque chose comme
.icon{
background-image: url(icon.svg);
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}
Regardez également le lien ci-dessus http://www.w3.org/TR/SVGTiny12/fonts.html
METTRE À JOUR
Opera mini ne prend pas en charge FontAwesome dans IOS 6.1 
Aucun autre exemple de font-face ne fonctionne ( http://codepen.io/bennettfeely/full/ErFGv ) 
Mais utiliser SVG semble une excellente solution, preuve du concept Source originale: http://dbushell.com/demos/css-sprites/ Plus d'infos sur la démo ci-dessus: http: //coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/
Allez à http://icomoon.io/app/
Bibliothèque d'icônes
Ajouter une bibliothèque Font Awesome
Sélectionnez les icônes que vous désirez
Police de bouton poussoir (exportation des icônes vers la police css génial)
Remplacer les polices Awesome (ttf, svg. Etc ...) par de nouvelles polices Awesome
CSS
@font-face{
font-family:"FontAwesome";
src:url('../fonts/awesome/fontawesome.eot');
src:url('../fonts/awesome/fontawesome.eot?#iefix') format('embedded-opentype'),
url('../fonts/awesome/fontawesome.woff') format('woff'), url('../fonts/awesome/fontawesome.ttf') format('truetype'),
url('../fonts/awesome/fontawesome.svg#fontawesomeregular') format('svg');
font-weight:normal;font-style:normal;}.flag:before,.mobile:before{font-family:"FontAwesome";font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;display: inline-block; text-decoration: inherit;}.flag:before{content:"\f024";}.mobile:before{content:"\f10b";}
J'essaie et Awesome Fonts fonctionne dans Opera Mobile :)
De tels bogues sont rapportés pour FortAwesome:
- https://github.com/FortAwesome/Font-Awesome/issues/246
- https://github.com/FortAwesome/Font-Awesome/issues/791
Ils n'ont pas encore été corrigés, ils ont contacté Opera Dev Relations pour savoir ce qui le cause. Vous n'avez pas beaucoup d'option, sauf d'attendre qu'ils le règlent. Suivre les bugs pour en savoir plus.
Pour cela, je sais qu’il existe un support @ font-face dans Opera Mini et un support partiel @ font-face dans Andoroid de 2.2 à 3.0 (les versions précédentes d’Android ne prenaient pas du tout en charge @ font-face). Voir: http://caniuse.com/fontface
Un support partiel de ce que je sais signifie qu’ils ne supportent pas les polices protégées par DRM et que certaines syntaxes telles que "smiley" ne fonctionnent pas pour elles.
Donc, si vous souhaitez afficher les icônes sur Opera Mini et Android 2.1, vous devez faire appel aux icônes d’image. Si vous rencontrez des problèmes avec Android 2.2-3.0, vous pouvez probablement le réparer en changeant la syntaxe.
Peut-être est-ce lié à charset? Déclarez-vous UTF-8 dans votre document et dans votre feuille de style?
<meta charset="UTF-8">
ou
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
et dans la feuille de style (note, doit être la première ligne, première col):
@charset "utf-8";
En tant que référence, j'ai eu ce problème et le problème était des domaines. Certains navigateurs, notamment Firefox, refusent de charger des polices d’un autre domaine (appelé politique de même domaine). Les en-têtes
Access-Control-Allow-Origin "*"
Dans nginx par exemple, ceci est configuré comme ceci:
location ~* \.(eot|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
Doit être défini et n'oubliez pas que le type de contenu des polices doit être
application/x-font-ttf ttf;
font/opentype otf;
application/vnd.ms-fontobject eot;
font/x-woff woff;
Un type de contenu incorrect peut entraîner le chargement de la police, vous perdez donc les icônes . C'est bien d'avoir cette information comme référence :)
utilisez icomoon app http://icomoon.io/app/ pour modifier la police svg en polices Web et remplacer l'ancienne police par Font Awesome. ça marche pour moi dans l'opéra mobile
Moi aussi j'ai eu du mal à faire apparaître une police SVG dans Blackberry. Le problème est le nom du svg (dans le document) et le nom de la famille de polices doit être identique. J'ai trouvé cette réponse ici, dans les commentaires à la dernière réponse: