Les icônes FontAwesome ne s'affichent pas. Pourquoi?
Récemment, j'ai développé ce site Web et j'essaye d'y mettre une super police d'icônes, donc évolutive.
La chose 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 à 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">
Bon, voici le code 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/[email protected]" 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>
<h1>The greatest way to contact those you love</h1>
<h3>In a way you don't imagine</h3>
<a href="#" class="btncta">Register Now</a>
</section>
</body>
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 partie href=.
Cependant, sous votre code HTML complet, vous trouvez 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 code HTML complet pour le devenir?
<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
Pour les chercheurs d’icônes manquant de police, j’ai rassemblé quelques idées:
Assurez-vous que vous utilisez 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, créez-vous un lien vers le CSS font-awesome à l'aide de HTTPS (remplacez
http://parhttps://dans le lien ci-dessus).Vérifiez deux fois que vous n'avez pas activé AdBlock Plus ou uBlock. Ils pourraient bloquer certaines des icônes.
Réinitialisez le cache de votre navigateur. (Sur Google Chrome, cliquez longuement sur le bouton de rechargement et sélectionnez Réinitialisation du cache physique)
Assurez-vous que l'élément
<span>ou<i>que vous utilisez utilise la famille de policesFontAwesome. Par exemple, il ne faut 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 ceci 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 y a ensuite des idées de dépannage sur le wiki de Font Awesome.
Le mien ne fonctionnait pas parce que je voulais une icône qui ne soit pas publiée dans la version de FA que j'utilisais.
Cela répond à la raison pour laquelle certaines icônes apparaissent, mais d'autres non.
C'est assez évident, mais je suppose que certaines personnes tombent encore pour ça. Comme moi.
Vous devez utiliser https pour maxcdn.bootstrapcdn.com. Seulement https sur maxcdn supporte CORS
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
À quiconque pourrait vérifier cela en 2018. J'utilise la police géniale 4.7.0 et le problème a été résolu en supprimant simplement la variable s dans fas, comme 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.
l'ajout a fonctionné pour moi:
<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
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>J'ai résolu ce problème en plaçant le répertoire Fonts au même niveau que mes fichiers CSS.
Si vous utilisez l'hébergement de blogueurs, utilisez cette url stylesheet css:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Au début, je ne pouvais pas obtenir que cela fonctionne avec Font Awesome 5 :
<i class="fa fa-sort-down"></i>
C'est pourquoi je suis venu ici, n'étant pas familier avec font awesome. 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 préfixe
fas, Font Awesome 4 utilisefa.Le s dans
fassignifie solid , et certaines icônes ont également un regular mode, spécifié en utilisant le préfixefar.
J'ai déjà remarqué les différents fichiers du dossier FontAwesome css, tels que:
- all.min.css
- marques.min.css
- fontawesome.min.css
- regular.min.css
- solid.min.css
Et c'est à ce moment-là que j'ai réalisé mon erreur. Tout ce que j'avais à faire était d'inclure le fichier CSS correspondant au code 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 le bon article:
<i class="fas fa-sort-down"></i>
Cette configuration fonctionne pour moi. Bien que tous les articles n'aient pas d'équivalent dans chaque type. Cela ne fonctionnera pas:
<i class="far fa-sort-down"></i>
En remarque, si vous ne voulez 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">
Si vous définissez un CSS personnalisé, vous devez définir font-weight: 900; pour une bibliothèque plus récente de Font Awesome (à partir de la version 5). Si vous ne définissez pas cette taille de police, des carrés peuvent apparaître.
J'ai pu faire fonctionner Font Awesome en utilisant le fichier all.min.css.
Essayez les liens ci-dessous garder en balise 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">
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">
Vous pouvez ajouter cela au fichier .htaccess dans le répertoire de la police awesome
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>
le lien CDN que vous aviez posté, je suppose, est la raison pour laquelle il n’a pas été affiché 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">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 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);
}
Assurez-vous d'inclure le rel et de taper comme dans "rel =" stylesheet "type = 'text/css'" dans le lien vers le fichier css awesomefont. Sans ceux-ci, le fichier ne se chargeait pas correctement pour moi.
Pour la version 5:
Si vous avez téléchargé le package gratuit à partir de ce site:
https://fontawesome.com/download
Les polices sont dans le all.css et all.min.css fichier.
Donc, votre référence ressemblera à quelque chose comme ça:
<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.
Il suffit d'ajouter quelques informations supplémentaires aux réponses ci-dessus en ce qui concerne la mise à jour de fontawesome,
Si vous utilisez une police géniale 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>
Note: Mieux vaut inclure tous vos scripts dans le <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>
Remarques
Cette réponse est créée lorsque la dernière version de fontawesome est v5. * mais fil et - npm version pointe sur v4. * (21.06.2019). En d'autres termes, les versions installées via les gestionnaires de paquets sont en retard sur la dernière version!
Si vous avez installé font-awesome via le gestionnaire de paquets ( fil ou npm ), sachez quelle version a été installée. Sinon, si vous avez déjà installé font-awesome il 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
└─ [email protected]
info All dependencies
└─ [email protected]
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.
└─ [email protected]
Done in 0.79s.
Problème
Après avoir installé la dépendance font-awesome, vous incorporez l’un de ces deux fichiers sources font-awesome.css ou font-awesome.min.css (créé dans node_modules/font-awesome/css/) dans l’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 libres et vous recherchez une icône de connexion (à titre d'exemple). Vous copiez l'icône par exemple. <i class="fas fa-sign-in-alt"></i>, vous le 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
Essentiellement, les versions installées via des gestionnaires de paquets sont derrière la version affichée sur le site Web https://fontawesome.com/ . Comme vous pouvez le constater, nous avons installé font-awesome v4.7.0, mais le site Web affiche la documentation pour font-awesome v5.*. Solution, visitez le site Web documentant les icônes pour v4.7.0https://fontawesome.com/v4.7. , copiez l'icône appropriée, par exemple. <i class="fa fa-sign-in" aria-hidden="true"></i> et l'intégrer à votre html.