La police géniale n'affiche pas l'icône

99

J'utilise Font Awesome et je ne souhaite pas ajouter de CSS avec HTTP. J'ai téléchargé Font Awesome et l'ai inclus dans mon code, mais 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>

Je voudrais savoir comment faire afficher l'icône au lieu de la boîte carrée bordée.

html css font-awesome

— Ganesh H
source

5

Cela a déjà été demandé à plusieurs reprises. Assurez-vous que vous incluez également les fichiers de polices .. pas seulement le CSS stackoverflow.com/questions/14366158/...

— Zim

voici le lien vers le guide de dépannage de font-awesome sur git github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

— Mehavel

Veuillez mettre à jour la question avec la structure de votre dossier dans laquelle vous avez le dossier font-awesome, afin que nous puissions comprendre que "font-awesome.min.css" obtient correctement le chemin ttf ou non. Seul le css ne fonctionnera pas.

— Ajit Hogade

stackoverflow.com/a/42355738/397872

— rishta

84

Dans mon cas, j'ai fait l'erreur suivante dans mon code css.

*{
    font-family: 'Open Sans', sans-serif !important;
}

Cela remplacera toutes les règles de famille de polices pour toute la page. Ma solution était de déplacer le code vers le corps comme ça.

body{
    font-family: 'Open Sans', sans-serif;
}

NB: Chaque fois que vous utilisez le !importantdrapeau en css, toute autre règle css déclarée du même type sur le même élément sera remplacée.

— Daniel Barde
source

4

C'était la solution pour moi. J'ai eu *{font-family: Raleway}et je l'ai changé en*.not(i) {font-family: Raleway}

— fungusanthrax

J'ai eu ce problème aussi, mais je ne m'en suis pas rendu compte depuis des lustres car dans DevTools, cela ressemblait vraiment à FontAwesome était utilisé. Voir ma réponse pour plus de détails.

— Dagmar

59

Lorsque vous ouvrez, font-awesome.min.cssvous pouvez voir le chemin suivant:

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

Cela signifie que vous devez créer un répertoire Fontspuis copier les fichiers fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot) dans ce dossier. Après cela, tout devrait bien fonctionner.

— user2980426
source

Depuis au moins 0.8.1 font-awesome n'est pas référencé. Il y a trois summernotefichiers dans le dossier de la police avec des extensions eot, ttfet woffqui doivent être distribués.

— ficuscr

2

Attention, en 4.6.3 (sinon plus tôt) ce n'est fontspas Fontsle cas et sur un système sensible à la casse qui pose des problèmes ...

— Jason

1

pourquoi font awesome ne le dit-il pas sur leur site Web? ce n'est vraiment pas explicite.

— Matt

Impressionnant! Je pensais que les polices devaient être dans le même dossier que le css, elles devaient être d'un niveau de dossier supérieur.

— Giovani Vercauteren

Assurez-vous également que votre bibliothèque est à jour. J'avais tous mes logos sauf le logo du bandcamp. Une fois que j'ai téléchargé la mise à jour 4.7 et remplacé les fichiers, cela a fonctionné.

— Ryan Walker

45

Sachez que la nouvelle version (5) de font awesome utilise "fas"ou à la "fab"place du "fa"préfixe.

Cité 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>

Voir: https://fontawesome.com/icons/facebook-f?style=brands

— Krystonen
source

Cela l'a fait pour moi! Étrange qu'il n'ait pas été mis à jour dans la documentation

— GroomedGorilla

C'était la seule chose qui fonctionnait. Si vous utilisez une version moderne, utilisez ceci.

— samurdhilbk

LIVE SAVER! changer pour "fa fa-bars" borked

— méchant

Merci, pour moi quelques icônes wirk avec fas et d'autres avec fab, par exemple fab fa-twitter c'est bien mais fas fa-twitter montre un carré blanc, allez comprendre!

— user1620090

Donc, si la nouvelle version est fas, alors pourquoi dois-je changer mes classes de `` fas '' à `` fa ''

— Sam

22

Tout d'abord, vérifiez que vous avez class = "fa" ainsi que quelle que soit 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.

— Encore une question
source

1

Cela a fonctionné pour moi. Pour moi, fab fa-envelopp ne fonctionnait pas, mais alors fa-envelopp fonctionnait. Très étrange mais a résolu mon problème.

— Jordan Schuetz

@JordanSchuetz "fab" est spécifique aux icônes de marque, comme "fab fa-facebook-f". Dans les versions plus récentes, vous trouverez «fas» pour la variante «solide», donc la vôtre serait fixée à «fas fa-enveloppe» dans les nouvelles versions, ou «fa fa-enveloppe» dans une ancienne.

— Tessa le

20

Ouvrez votre code font-awesome.css 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">

— Erga Kandly
source

11

Vérifiez que le chemin d'accès à votre CSSfichier 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 de serveurs géniaux:

<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 serez sûr de pointer vers le bon CSSfichier, et vous bénéficierez également des dernières mises à jour instantanément.

— Valentin Mercier
source

10

J'ai fait la même chose et j'ai toujours une boîte carrée

— Vipul Hadiya

5

je faisais face au même problème puis je me suis rendu compte que je devais 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">

— Halide
source

4

Pour commencer, vous ne devriez pas avoir les deux font-awesome.css et font-awesome.min.css

Généralement, utilisez font-awesome.csspendant le développement, puis passez à font-awesome.min.cssune 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 css.

Si votre fichier html est dans le répertoire de base, et le css dans un sous-dossier hors de la racine, vous aurez besoin de: href="./css/font-awesome.css"(point unique)

— Paul
source

4

Tout ce qui précède est correct, mais en plus de cela, mon problème était 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 articles ci-dessus et cela a résolu mon problème.

— Mickers
source

1

J'ai également eu des problèmes pour faire fonctionner la v5 + de FontAwesome. Avait changé leur dossier "webfonts" en "fonts" dans le css, et l'avait placé de la même manière, et cela ne fonctionnait pas correctement. Fichiers remplacés par la v4.7.0 et cela fonctionne comme un charme. Hrm.

— Lisa Cerilli

1

Dans la version 5, la famille de polices pour les icônes n'est plus "FontAwesome". Dans la version gratuite, il s'agit maintenant de "Font Awesome 5 Free" et de "Font Awesome 5 Pro" dans la version pro. J'avais ce problème lorsque j'utilisais manuellement les codes de caractères à quelques endroits, et ils ont cessé de fonctionner car la famille de polices n'était pas définie.

— Tessa

4

J'étais confronté au même problème ... donc au lieu de télécharger une police géniale, j'ai ajouté un lien dans mon code html et cela a fonctionné.

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Développer l'extrait

— Hrithik Verma
source

Merci beaucoup, je passe 24 heures à réparer cette fontawesome

— Mathew Magante le

2

J'ai installé avec succès Font Awesome en utilisant leur CDN et javascript inclus (comme décrit sur cette page ). Ensuite, j'ai essayé de copier le HTML et le CSS sur certaines pages héritées et j'ai soudainement 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 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 barrée s'il y avait un problème ... Cependant, j'avais vraiment épuisé toutes mes options, alors j'ai vérifié les styles calculés et j'ai vu clairement que la police Font Awesome n'était certainement pas utilisée. (Voir la police rendue en bas)

Mon ancien fichier CSS était en désordre et j'ai préféré ne pas le toucher, alors j'ai triché en faisant cela - veuillez ne le dire à personne :)

<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>

À noter également, lorsque j'ai mis à niveau la version 4.7.0 de Font Awesome vers la version 5.4.1, ce problème a disparu! J'ai utilisé ce guide de configuration et ce HTML

<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>

— Dagmar
source

2

Pour ceux d'entre vous qui utilisent SCSS et le package NPM, voici ma solution:

npm i --save @fortawesome/fontawesome-free

Puis 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';

— Jeff Diederiks
source

Intéressant l'ajout @fortawesome/fontawesome-free/css/all.csscorrigé

— Andy Braham

1

Dans mon cas: vous devez copier tout le dossier font-awesome dans le dossier css de votre projet et pas seulement le fichier font-awesome.min.css .

— sst
source

1

Il semble donc que l'ajout style='font-weight:normal;'ou la modification de la police directement sur l'élément remplace la .fas{font-weight:900}définition 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-weightdoit être défini entre 501 et 1000, sinon la police peut ressembler à un bloc carré.

— James Wilkins
source

1

mon problème était celui qui avait le plus de votes

*{
font-family: xxxxx
}

le changer pour cela a résolu le problème

body{
font-family: xxxx
}

— Jamsheer
source

0

Vous avez peut-être utilisé un VCS (git ou autre) pour transférer des fichiers d'icônes vers 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 corriger vos polices.

— rishta
source

0

Je pense que vous n'avez pas de dossier de polices dans votre dossier racine comme où reste le dossier css.

Démo

Et le dossier css est comme

Et un dossier de polices comme

J'espère que cela fonctionnera pour vous.

Merci.

— Obaidul Haque
source

0

Sur MacOS Mojave, j'ai eu ce problème dans Safari. Les images géniales de polices fonctionnaient dans Chrome mais pas dans Safari, donc j'étais sûr 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" sous l'onglet Confidentialité.

Je ne sais pas pourquoi cela a résolu le problème, mais c'est le cas.

— Michael Shulman
source

0

Basé sur la version 5.10.1.

Ma solution (localement):

Si vous utilisez "fontawesome.css" ou "fontawesome.min.css", essayez d'utiliser "all.css" à la place (situé dans le dossier css).
Le dossier "css" et le dossier "webfonts" du package fontawesome que vous avez téléchargé doivent être au même niveau l'un que l'autre.

Dans mon cas, j'avais déjà un dossier css donc j'ai juste renommé le dossier fontawesome css en "css-fa".

Avec à la fois "css-fa" et "webfonts" dans mon dossier css, liez-le simplement correctement dans votre éditeur de texte et cela devrait fonctionner.

Ex: lien rel = "styleheet" href = "css / css-fa / all.css"

— Tou Toua Yang
source

0

résolu en changeant le sélecteur de famille de polices ciblé! important de * { ... } à *:not(i) { ... }

(avec préprocesseur scss); j'espère que tu es résolu

— Backciro
source

0

Le code ci-dessous est font-awesome 4.70.0. Pour accéder à font-awesome 5.11.2, cliquez ici .

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>

— PythonMaster202
source

0

J'utilise FontAwesome Pro, et la solution pour moi était d'intégrer all.min.cssau lieu de fontawesome.min.css.

— Bruno Leveque
source

0

Je suivais ce tutoriel pour héberger moi-même Font Awesome Pro 5.13.

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Pour une raison quelconque, je n'ai pas pu <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">charger, ce webfontsqui n'a entraîné que des carrés. Mais quand j'ai utilisé, <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>tout a commencé à fonctionner. Les deux liens ont été ajoutés en HTML <head>.

— Ogglas
source

le problème avec ce js est que le fichier est trop lourd

— exequielc le

0

J'essayais d'ajouter fa 5.0.13 à drupal 8 avec scss. Les styles ne sont pas inclus par défaut dans le fa.scss principal a dû les ajouter manuellement.

@import "libraries/fontawesome/fa-brands";
@import "libraries/fontawesome/fa-light";
@import "libraries/fontawesome/fa-regular";
@import "libraries/fontawesome/fa-solid";

— bonkisama
source

0

vous devez mettre le fichier font-awesome dans le dossier css et le modifier

href = "../ css / font-awesome.css" à href = "css / font-awesome.css"

Encore une chose, vous pouvez remplacer ce fichier css Font-awesome et essayer celui-ci

.social-media{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.social-media li .fa{ 
  background: #fff;
  color: #262626;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height:50px; 
}

.social-media .fa:hover { 
  box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
  background:#55acee;
  color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
  background:#3b5998;
  color:#fff;
}

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

<ul class="social-media">
  <li><i class="fa fa-twitter fa-2x"></i></li>
  <li><i class="fa fa-facebook fa-2x"></i></li>
 
</ul>

Développer l'extrait

— sani
source

0

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Développer l'extrait

— De Zin Htang
source

Travaille très bien avec ça

— De Zin Htang

-1

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>

— Ronald Namwanza
source

-1

Attention à Bootstrap! Bootstrap remplacera les classes .fa. Si vous apportez les deux packages séparément en pensant "J'utiliserai Bootstrap pour la gestion réactive des blocs et Font-Awesome pour les icônes", vous devez aborder les classes .fa dans Bootstrap afin qu'elles n'interfèrent pas avec le support de Font-Awesome- mise en œuvre seule.

Par exemple: la famille de polices 'FontAwesome' dans Bootstrap interférera avec la famille de polices 'Font Awesome 5 Free' dans Font-Awesome et vous obtiendrez une boîte blanche au lieu de l'icône que vous voulez.

Il existe peut-être des moyens plus propres de gérer cela, mais si vous avez parcouru la liste de contrôle en essayant de résoudre le problème de la "boîte blanche" et que vous ne parvenez toujours pas à le comprendre (comme je l'ai fait), c'est peut-être la réponse que vous cherchez pour.

— jtubre
source

Pourquoi voter contre? C'est un cas extrême, mais c'est une cause difficile à trouver ailleurs.

— jtubre

-1

Dans mon cas, le problème a été causé par l'utilisation de certains styles réguliers ( far) qui ne sont pas inclus dans l'ensemble gratuit. Changer pour le fasréparer.

— Yngve Høiseth
source