Les icônes FontAwesome ne s'affichent pas. Pourquoi?

123

Récemment, j'ai développé ce site Web et j'essaie d'y mettre une police d'icônes géniales, donc il est évolutif.

Le fait est qu'ils ne se présentent pas.

Regardez le HTML:

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>

ou

<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>

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

Je ne sais pas pourquoi ils ne se présentent pas.

Voici la référence:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

D'accord, voici le html complet:

<head>
    <meta charset="UTF-8">
    <title>Retrica</title>
    <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="style/normalize.css" rel="stylesheet" type="text/css">
    <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="top-header">
        <div class="container"><!-- Start Container -->
            <div class="row"><!-- Start Row -->
                <div class="span3"><!-- Start Span3 -->
                    <div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
                </div><!-- End Span3 -->
                <div class="span9"><!-- Start Span9 -->
                    <nav class="main-nav">  <!-- Start Nav -->

                        <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
                        <ul class="nav-ul"> <!-- Start Unordered List -->
                            <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
                            <li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>

                        </ul> <!-- End Unordered List -->
                    </nav><!-- End Nav -->
                </div><!-- End Span9 -->
            </div><!-- End Row -->
        </div><!-- End Container -->
    </header>

    <section>

        <a href="#" class="btncta">Register Now</a>
    </section>

</body>
html  css  font-awesome 
— Luis Valdez
source
1
Fonctionne bien pour moi: jsfiddle.net/ZF7x4
— Shahar
— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
1
Veuillez essayer une autre version de font-awesome. Par exemple, certaines icônes ne m'apparaissaient pas sur la version 4.3.0 mais elles sont apparues sur 4.7.0.
— Almir Campos
Veuillez consulter stackoverflow.com/a/55977898/4874281 . J'espère que ça aide quelqu'un
— manian

Réponses:

105

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

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

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

Cependant, sous votre html complet est ceci:

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

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

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

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

— NathanG
source
10
Remarque : parfois, vous pouvez voir des cases vides, puis vérifiez que vous avez le fichier css et les polices dans le même dossier, vérifiez ceci , espérons aider quelqu'un.
— shaijut
104

Pour les chercheurs d'icônes de polices manquantes, j'ai rassemblé quelques idées:

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

    <link 
  href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>

  • Si votre page utilise HTTPS, faites-vous un lien vers le CSS font-awesome en utilisant HTTPS (remplacez http://par https://dans le lien ci-dessus).

  • Vérifiez à nouveau que vous n'avez pas activé AdBlock Plus ou uBlock. Ils peuvent bloquer certaines des icônes.

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

  • Assurez-vous que l' élément <span>ou que <i>vous utilisez utilise la FontAwesomefamille de polices. Par exemple, il ne doit pas simplement

    <i class="fa-pencil" title="Edit"></i>

    mais

    <i class="fa fa-pencil" title="Edit"></i>

    Cela ne fonctionnera pas si vous avez quelque chose comme ce qui 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, il existe d'autres idées de dépannage sur le wiki Font Awesome.

— mxro
source
3
J'ajouterai: Vérifiez que votre .htaccess ne bloque pas les extensions ttf, svg, eot ou woff
— BassMHL
remplacements de police! Peu de réponses mentionnent celle-ci. J'ai vérifié et vérifié et vérifié et finalement compris. J'ai également rencontré ce problème dans le passé, et je ne savais pas pourquoi, mais maintenant je sais.
— adrianmc
1
J'ai manqué d'ajouter le single facomme nom de classe en premier. Merci. Réponse parfaite pour trouver le problème étape par étape.
— Kai Noack
Pour moi, c'était autre chose de définir la famille de polices
— levininja
Pour moi, j'avais "font-weight: 500" (pour le rendre cohérent avec le thème que j'utilisais). J'ai dû le régler sur "font-weight: bold"
— bowlerae
24

Au début, je ne pouvais pas faire fonctionner cela avec Font Awesome 5 :

<i class="fa fa-sort-down"></i>

C'est pourquoi je suis venu ici, n'étant pas familier avec les polices géniales. Donc, quand j'ai regardé plus loin, j'ai remarqué que mon problème était simplement un problème avec la version.

w3schools m'a aidé dans ce cas.

Nouveau dans Font Awesome 5 est le faspréfixe utilisé par Font Awesome 4 fa.

Le s dans fassignifie solide et certaines icônes ont également un mode normal , spécifié à l'aide du préfixe far.

J'ai déjà remarqué les différents fichiers dans le dossier FontAwesome css, comme:

  • all.min.css
  • marques.min.css
  • fontawesome.min.css
  • regular.min.css
  • solid.min.css

Et c'est là que j'ai réalisé mon erreur. Tout ce que j'avais à faire était d'inclure le css approprié dans le html:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">

Et puis référencez l'article correct:

<i class="fas fa-sort-down"></i>

Cette configuration fonctionne pour moi. Cependant, tous les éléments n'ont pas d'équivalents dans chaque type. Cela ne fonctionnera pas:

<i class="far fa-sort-down"></i>

En remarque, lorsque vous ne souhaitez pas référencer tous les fichiers séparés, cela suffira:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
— Ruard van Elburg
source
De plus, la feuille de triche montre quels éléments sont disponibles pour chaque type d'icône.
— Ruard van Elburg
12

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

Cela explique pourquoi certaines icônes sont affichées mais d'autres non.

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

— Taiguara Andrade
source
4
Oui, cela fournit une réponse à la question.
— Bobort
2
Ou vous essayez d'utiliser une police plus ancienne qui n'existe plus dans la version que vous utilisez. Celui-ci, par exemple, s'appelle simplement times-circle et non times-circle-o qui est l'ancien nom: fontawesome.com/v4.7.0/icon/times-circle-o
— smoore4
1
Je vous remercie!! Cela m'a fait tirer mes cheveux toute la journée
— 24x7
5

Vous devez utiliser https pour maxcdn.bootstrapcdn.com. Seul https sur maxcdn prend en charge CORS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
— Chatchawan Wongsiriprasert
source
4

J'ai résolu ce problème en mettant le répertoire Fonts au même niveau que mes fichiers CSS.

— lolo
source
3

À quiconque vérifiera cela en 2018. J'utilise la police awesome 4.7.0 et j'ai résolu ce problème en supprimant simplement le sin fascomme indiqué dans le code <i class="fa fa-[icon-name]"></i>. C'était à l'origine <i class="fas fa-[icon-name]"></i>.

J'espère que cela t'aides.

— Goodluck Leo
source
De plus, j'exécute le serveur node.js.
— Goodluck Leo
Nouveau dans Font Awesome 5 est le préfixe fas, Font Awesome 4 utilise fa. De w3schools
— Ruard van Elburg
2

Il suffit d'ajouter quelques informations supplémentaires aux réponses ci-dessus concernant la mise à jour de fontawesome,

Si vous utilisez font awesome 5,

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

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

Remarque: mieux vaut inclure tous vos scripts dans <body> {YOUR_SCRIPT_HERE}</body>et juste avant (YOUR_CLOSING_BODY)

b. Et par exemple,

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
— Sundar Gsv
source
Que diriez-vous de servir le css localement au lieu de créer un lien vers le site Web de la FA?
— Ghilteras
c'était mon cas ... je n'avais pas le fichier js, maintenant ça marche!
— Cristian Sepulveda
2

l'ajout de cela a fonctionné pour moi:

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

regarde

un exemple si complet est:

<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>
Développer l'extrait

— edgarmtze
source
2

Si vous définissez un CSS personnalisé, vous devez définir font-weight: 900;une bibliothèque Font Awesome plus récente (à partir de la version 5). Si vous ne définissez pas cette épaisseur de police, des carrés peuvent apparaître.

— jurev
source
2

Remarques

Cette réponse est créée lorsque la dernière version de fontawesome est v5. * Mais que la version yarn et npm pointe vers la v4. * (21.06.2019). En d'autres termes, les versions installées via les gestionnaires de packages sont derrière la dernière version!

Si vous avez installé font-awesomevia le gestionnaire de packages ( yarn ou npm ), sachez quelle version a été installée. Sinon, si vous avez déjà installé font-awesomeil y a longtemps, vérifiez quelle version a été installée.

Installation de font-awesome en tant que nouvelle dépendance:

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.

Vérifier quelle version de font-awesome est déjà installée:

$ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.

Problème

Après avoir installé la font-awesomedépendance, vous intégrez l' un de ces deux fichiers source font-awesome.cssou font-awesome.min.css(fondée en node_modules/font-awesome/css/) en - tête de votre page Web par exemple

<head>
  <link type="text/css" rel="stylesheet" href="css/font-awesome.css">
</head>

Ensuite, vous visitez https://fontawesome.com/ . Vous sélectionnez des icônes gratuites et vous recherchez l' icône de connexion (à titre d'exemple). Vous copiez l'icône par exemple <i class="fas fa-sign-in-alt"></i>, vous la collez dans votre html et, l'icône n'est pas affichée, ou est affichée sous forme de carré ou de rectangle!

Solution

En substance, les versions installées via les gestionnaires de packages sont derrière la version affichée sur le site Web https://fontawesome.com/ . Comme vous pouvez le voir, nous avons installé font-awesome v4.7.0mais, le site Web affiche la documentation pour font-awesome v5.*. Solution, visitez le site Web qui documente les icônes pour v4.7.0 https://fontawesome.com/v4.7.0 , copiez l'icône appropriée par exemple <i class="fa fa-sign-in" aria-hidden="true"></i>et incorporez-la dans votre html.

— Lukasz Dynowski
source
Ils ont publié un nouveau package ici qui a la dernière version. Il est également compatible avec less et sass \ o /
— DerpyNerd
2

Pour la version 5:

Si vous avez téléchargé le package gratuit depuis ce site:

https://fontawesome.com/download

Les polices se trouvent dans les fichiers all.css et all.min.css .

Ainsi, votre référence ressemblera à ceci:

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">

Le fichier fontawesome.css n'inclut pas la référence de police.

— l'amour en direct
source
1

Si vous utilisez l'hébergement de blogueurs, utilisez cette feuille de style d'URL css:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
— Nurdin BM.
source
1

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

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Obtenir les icônes à partir du lien ci-dessous:

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">
— Cerise
source
1

J'utilise:

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a>

et le 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);
}
— Tran Anh Hien
source
1

le lien CDN que vous aviez publié je suppose que c'est pourquoi il ne s'affichait pas correctement, vous pouvez utiliser celui-ci ci-dessous, cela fonctionne parfaitement pour moi.

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Développer l'extrait

— John Kesh Mahugu
source
0

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

— Elliot Robert
source
0

Vous pouvez l'ajouter 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

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
— Waleed Hakim
source
0

J'ai testé et ça marche.

Au lieu de cela

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Utilisez-le avec HTTPS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
— Atif Tariq
source
-1

Vous avez besoin d'un importateur de polices. essayer

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>
— SIAMWEBSITE
source
-2

J'ai fait travailler le mien en éditant le fichier principal font-awesome.css. Il a des URL vers le src (woff, eot, etc ...) J'ai dû les changer en chemin absolu, par exemple: http://mywebsite.com/font-awesome.woff Ensuite, cela a fonctionné!

— cristallove18
source
2
Je préfère ne pas le recommander car vous éditez un fichier externe. Vous (ou votre équipe) devrez vous en souvenir chaque fois qu'ils ont besoin de mettre à jour fontawesome.
— J Cordero
-6

Change ça:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Pour ça:

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

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).

— Shahar
source
@ user3870894 En fait href, je pensais à javascript. Mais essayez le nouveau code.
— Shahar
@ user3870894 o_o Publiez le HTML complet ou au moins les parties principales. Que dit la console? Avez-vous essayé d'inspecter l'élément?
— Shahar
2
@Shahar En utilisant //le navigateur choisit le protocole utilisé par le site demandeur. Lorsque votre site utilise https, il sélectionne https. Si vous utilisez http, il utilise http pour demander le fichier au CDN. Bien entendu, si vous ouvrez le site localement en utilisant file:///, ce qui n'est pas recommandé, le navigateur tentera en effet d'ouvrir le cdn avec le fileprotocole.
— Robin van Baalen
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.