Les icons FontAwesome ne s’affichent pas. Pourquoi?

Récemment, j’ai développé ce site et j’essaie de mettre une police de superbes icons, donc c’est évolutif.

La chose est qu’ils ne se présentent pas.

Regardez le HTML:

Get a FREE Quote  

ou

 
  • Home
  • J’ai mis la référence de la feuille de style dans la tête.

    Je ne sais pas pourquoi ils ne se montrent pas.

    Voici la référence:

      

    Bon, voici le HTML complet:

       Resortingca       

    The greatest way to contact those you love

    In a way you don't imagine

    Register Now

    Sous votre référence, vous avez ceci:

      

    Plus précisément, le href= partie.

    Cependant, sous votre code HTML complet, voici:

      

    Avez-vous essayé de remplacer src= avec href= dans votre HTML complet pour devenir cela?

      

    Fonctionne pour moi: http://codepen.io/TheNathanG/pen/xbyFg

    Pour les chercheurs d’icons manquantes, j’ai collecté quelques idées:

    • Assurez-vous d’utiliser un lien correct vers le CDN, tel que:

        
    • Si votre page utilise le protocole HTTPS, créez-vous un lien vers la police CSS impressionnante en utilisant HTTPS (remplacez http:// par https:// dans le lien ci-dessus).

    • Vérifiez que vous n’avez pas activé AdBlock Plus ou uBlock. Ils peuvent bloquer certaines des icons.

    • Réinitialisez le cache de votre navigateur. (Sur Chrome, faites un clic long sur le bouton de rechargement et sélectionnez Réinitialisation du cache dur)

    • Assurez-vous que l’élément ou vous utilisez utilise la famille de fonts FontAwesome . Par exemple, il ne faut pas seulement

        

      mais

        

      Cela ne fonctionnera pas si vous avez quelque chose comme suit dans votre CSS:

       * { font-family: 'Josefin Sans', sans-serif !important; } 
    • Si vous utilisez IE8, utilisez-vous un HTML5 Shim?

    • Si cela ne fonctionne pas, d’autres idées de dépannage sont disponibles sur le wiki Font Awesome.

    Vous devez utiliser https pour maxcdn.bootstrapcdn.com. Seulement https sur le support maxcdn CORS

      

    Le mien ne fonctionnait pas parce que je voulais une icône qui n’était pas disponible dans la version FA que j’utilisais.

    Cela répond à la raison pour laquelle certaines icons affichent mais d’autres non.

    Assez évident mais je suppose que certaines personnes tombent encore pour ça. Comme moi.

    en ajoutant cela a fonctionné pour moi:

      

    regarde

    exemple si complet est:

    J’ai résolu ce problème en plaçant le répertoire Fonts au même niveau que mes fichiers CSS.

    Essayez les deux liens ci-dessous garder dans la balise d’en-tête.

      

    Obtenir les icons du lien ci-dessous:

      

    Si vous utilisez un hébergement de blogger, utilisez cette url stylesheet css:

      

    Assurez-vous d’inclure le type rel et comme dans “rel =” stylesheet “type = ‘text / css'” dans le lien vers le fichier css awesomefont. Sans cela, le fichier ne se chargeait pas correctement pour moi.

    Vous pouvez append ceci dans le fichier .htaccess dans le répertoire de la police géniale

     AddType font/ttf .ttf AddType font/eot .eot AddType font/woff .woff AddType font/woff .woff2 AddType font/otf .svg   Header set Access-Control-Allow-Origin "*"   

    J’utilise:

       

    et style après:

     .icon::before { display: inline-block; margin-right: .5em; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); } 

    Juste en ajoutant quelques informations supplémentaires aux réponses ci-dessus concernant la mise à jour de fontawesome,

    Si vous utilisez la police génial 5,

    une. Il suffit de copier-coller le code HTML ci-dessous,

      

    Note: Mieux vaut inclure tous vos scripts dans le {YOUR_SCRIPT_HERE} et juste avant (YOUR_CLOSING_BODY)

    b. Et par exemple,

     
  • Vous avez besoin d’un importateur de fonts. essayer

      

    J’ai mis le mien au travail en éditant le fichier principal font-awesome.css. Il a des URL au src (woff, eot, etc …) Je devais les changer pour le chemin absolu par exemple: http://mywebsite.com/font-awesome.woff Alors ça a fonctionné!

    Change ça:

      

    Pour ça:

      

    Je crois que vous avez besoin du http: sinon, il ne sait pas quel protocole utiliser (et utilise le mauvais file: , par exemple, en conséquence).