La police géniale ne montre pas l'icône
J'utilise Font Awesome et ne souhaite pas ajouter de CSS avec HTTP. J'ai téléchargé Font Awesome et l'ai inclus dans mon code. Pourtant, Font Awesome affiche une boîte carrée bordée au lieu d'une icône. Voici mon code:
<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>
J'aimerais savoir comment afficher l'icône au lieu de la case carrée bordée.
Dans mon cas, j'ai commis l'erreur suivante dans mon code CSS.
*{
font-family: 'Open Sans', sans-serif !important;
}
Cela remplacera toutes les règles de la famille de polices pour la page entière ..__ Ma solution était de déplacer le code au corps de cette manière.
body{
font-family: 'Open Sans', sans-serif;
}
NB: chaque fois que vous utilisez l'indicateur !important dans css, toute autre règle css déclarée du même type sur le même élément sera annulée.
Lorsque vous ouvrez font-awesome.min.css, vous pouvez voir le chemin suivant:
'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...
Cela signifie que vous devez créer le répertoire Fonts, puis copier les fichiers fontawesome-webfont.ttf (fontawesome-webfont.woff, fontawesome-webfont.eot) dans ce dossier. Après cela, tout devrait bien fonctionner.
Tout d'abord, vérifiez que vous avez class = "fa" ainsi que la classe de l'icône. Donc pas seulement
<i class="fa-pencil" title="Edit"></i>
Mais aussi
<i class="fa fa-pencil" title="Edit"></i>
Ensuite, cela fonctionne comme prévu. Cela a résolu mon problème.
Sachez que la nouvelle version (5) de font awesome utilise "fas" ou "fab" au lieu du préfixe "fa".
Citation de leur site web:
Le préfixe fa est obsolète dans la version 5. La nouvelle valeur par défaut est le style fas solid et le style fab pour les marques.
C'est pourquoi mes polices affichaient des carrés vierges. Maintenant corrigé.
Exemple de code:
<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>
Ouvrez votre font-awesome.css Theres code comme:
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
vous devez avoir un dossier comme:
font awesome -> css
-> fonts
ou le moyen le plus simple:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
Vérifiez que le chemin d'accès à votre fichier CSS est correct. Préférez plutôt les liens absolus, ils sont plus faciles à comprendre car nous savons d’où nous partons et les moteurs de recherche les préféreront également aux liens relatifs. Et pour réduire la bande passante, utilisez plutôt le lien depuis des serveurs font-awesome:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">
De plus, si vous l'utilisez, il ne sera pas nécessaire de télécharger des polices supplémentaires sur votre serveur et vous vous assurerez de pointer vers le fichier CSS correct, et vous pourrez également bénéficier instantanément des dernières mises à jour.
Pour commencer, vous ne devriez pas avoir à la fois font-awesome.css et font-awesome.min.css
Généralement, utilisez font-awesome.css pendant le développement, puis passez à font-awesome.min.css une fois que vous êtes satisfait du site.
Des problèmes comme celui-ci sont souvent causés par des chemins et des emplacements relatifs, alors vérifiez où se trouve votre fichier html par rapport au fichier css.
Si votre fichier html est dans le répertoire de base et que le css est dans un sous-dossier de la racine, vous aurez besoin de: href="./css/font-awesome.css" (une seule période)
Tout ce qui précède est correct, mais en plus, le problème, c'est que j'ai téléchargé la version gratuite de FA5, qui n'a pas:
font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')
Je ne pouvais pas faire fonctionner la v5, je suis donc revenu à la version 4.7.0 à l'aide des messages ci-dessus et le problème a été résolu.
Dans mon cas: Vous devez copier le dossier entier font-awesome dans le dossier css de votre projet et pas seulement le fichier font-awesome.min.css .
J'ai installé avec succès Font Awesome en utilisant leur CDN et leur javascript include (comme décrit sur cette page ). Ensuite, j'ai essayé de copier le code HTML et CSS dans des pages héritées et tout à coup, j'ai vu des cases carrées vides au lieu des icônes.
J'ai vu la réponse de Daniel (ci-dessus) et, comme mon ancien fichier CSS était énorme (et vieux de plusieurs années), je soupçonnais que c'était là le problème. Cependant, lorsque j'ai regardé dans Chrome DevTools, il semblait vraiment que Font Awesome était chargé:
Je m'attendais à voir la police en grève s'il y avait un problème ... Cependant, j'avais épuisé toutes mes options, j'ai donc vérifié les styles calculés et constaté que la police Font Awesome n'était absolument pas utilisée. (Voir la police rendue en bas)
Mon ancien fichier CSS était en désordre et je préférais ne pas y toucher. J'ai donc triché en faisant cela - ne le dis à personne :)
<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>
À noter également que lors de la mise à niveau de Font Awesome version 4.7.0 vers la version 5.4.1, ce problème était réglé! J'ai utilisé ce guide d'installation et ce HTML
<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>
Dans font-awesome-4.x, ajoutez le dossier fonts à vos dossiers d'applications Web.
je faisais face au même problème alors je l'ai compris, je dois utiliser une nouvelle version (5 et plus)
utilisez ce cdn cela fonctionnera.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
Sur MacOS Mojave, j'ai eu ce problème dans Safari. Les images de police géniales fonctionnaient dans Chrome, mais pas dans Safari. J'étais donc sûre que ce n'était pas le site.
Je les ai rendus en allant dans Préférences dans le menu Safari, et en désactivant/décochant "Empêcher le suivi intersite" dans l'onglet Confidentialité.
Je ne sais pas pourquoi cela a résolu le problème, mais c'est ce qui s'est passé.
Basé sur la version 5.10.1.
Ma solution (localement):
Si vous utilisez "fontawesome.css" ou "fontawesome.min.css", essayez plutôt "all.css" (situé dans le dossier css).
Le dossier "css" et le dossier "webfonts" du paquet fontawesome que vous avez téléchargé doivent être au même niveau.
Dans mon cas, j'avais déjà un dossier css, alors je viens de renommer le dossier css de fontawesome en "css-fa".
Avec "css-fa" et "webfonts" dans mon dossier css, il suffit de le lier correctement dans votre éditeur de texte et cela devrait fonctionner.
Ex: lien rel = "stylesheet" href = "css/css-fa/all.css"
You needed to close your `<link />`
As you can see in your <head></head> tag. This will solve your problem
<head>
<link rel="stylesheet" href="../css/font-awesome.css" />
<link rel="stylesheet" href="../css/font-awesome.min.css" />
</head>
Je pense que vous n’avez pas de dossier de polices dans votre dossier racine, comme où rester le dossier css.
Démo
Et le dossier css est comme
Et le dossier des polices comme
J'espère que cela fonctionnera pour vous.
Merci.
Pour ceux qui utilisent SCSS et le package NPM, voici ma solution:
npm i --save @fortawesome/fontawesome-free
Ensuite, en haut d'un fichier SCSS (idéalement, un fichier SCSS importé à la racine de votre application):
@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';
Vous avez peut-être utilisé un VCS (git ou quelque chose de tel) pour transférer des fichiers d'icônes sur le serveur . Git dit:
warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.
Vous devez probablement réparer vos polices.
Il semble donc que l'ajout de style='font-weight:normal;' ou le fait de changer la police directement sur l'élément annule la définition de .fas{font-weight:900} dans le fichier CSS de Font Awesome. Je suppose que la police a des définitions spécifiques dans le fichier de police avec lequel elle fonctionne. Il semble que le font-weight doit être compris entre 501 et 1000, sinon la police peut ressembler à un bloc carré.