J'essaie d'utiliser une icône Font-Awsome dans un bouton. L'icône fonctionne bien dans Firefox, mais lorsque je l'utilise en chrome, il apparaît comme un carré. J'ai regardé autour de moi et la seule chose que j'ai trouvée était que les chemins vers les polices ne soient peut-être pas la raison, mais j'ai depuis essayé la version CDN ici et il travaille toujours dans Firefox mais pas en chrome.
J'ai aussi essayé les mêmes styles dans un fichier HTML statique sur mon ordinateur, il fonctionne bien. P>
Voici un exemple de HTML utilisé: P>
<a id="btnLogin" href="url.com" class="btn btn-primary btn-large disabled">
<i class="icon-refresh icon-white"></i>
Sign in using Facebook
</a>
6 Réponses :
J'ai eu le même problème. Mais j'ai réparé cela.
dans les fichiers de polices géniales de police doivent être placés dans le répertoire "
La réponse ci-dessus est correcte mais je voulais clarifier une étape plus loin parce que je ne pense pas qu'il est clair sur la page géniale de police pour commencer. J'ai ajouté la feuille de style Min.Csss et est liée à celle-ci dans la section de la tête de ma page. Vous aurez également besoin d'obtenir les cinq fichiers de police et de les mettre dans votre dossier "Polices" de votre projet. Il devrait y avoir cinq fichiers et ils se termineront par:
.EOT .svg .tf .woff .Of
J'ai récupéré les fichiers de github ici: https://github.com/fefesome/font-awesome < / a>
Merci d'avoir expliqué clairement. Je pensais à réparer ce jour, mais maintenant ça marche bien.
Si vous avez tout au bon endroit (et que vous avez même vérifié le CSS pour vous assurer que les chemins ont raison et que vous vous demandez si vous avez besoin d'un fichier JS), essayez de consulter votre HTML:
<i class="fa fa-users"></i>
Pour moi, ce problème était dû à un numéro de Stray 4 dans l'un de mes fichiers CSS.
Je tirai mes cheveux et j'utilisais toutes les solutions pointillées en vain, mais après avoir ouvert un fichier CSS entièrement indépendant et en trouvant le numéro 4 à la fin du document et en le supprimant, cela fonctionnait parfaitement.
Vérifiez chaque fichier CSS pour des caractères errants.
J'ai le même problème et j'ai enfin trouvé quel est le problème. C'est parce que j'ai remplacé le Font-famille de la balise à quelque chose d'autre.
réponse très tardive mais cela pourrait aider un autre frère là-bas!
J'ai découvert que ce comportement a été résolu par ne pas avoir d'affichage: bloc; sur l'élément I / .fa.
.fa est la norme standard en ligne mais je l'ai changée pour bloquer une meilleure compatibilité pour les anciens navigateurs, mais il doit être en ligne ou peut-être quelque chose d'autre similaire.
J'espère que cela aide quelqu'un là-bas!
Quel est le jeu de caractères de la page
Pouvez-vous voir les polices géniales de police fonctionnant correctement sur les pages de démonstration géniales de police en chrome?
Essayez d'ajouter
la tête de la page@Biily Moat Oui, ils fonctionnent bien sauf quand sur ma page d'applications ...
Pouvez-vous poster le HTML complet pour votre page?
Pouvez-vous poster votre code complet ou créer un jsfiddle?
Je viens d'avoir le même problème, pour moi, cela a fini par être un fichier de police corrompu. Un nouveau téléchargement corrigé le problème.
Avait le même problème, je n'avais copié que les fichiers CSS à mon projet. Vous devez également copier la police / le répertoire.