FontAwesome icônes de ne pas montrer. Pourquoi?

Récemment, j'ai été le développement de ce site et je suis en train de mettre une police impressionnant icônes, et il est donc évolutive.

Le truc, c'est qu'ils ne sont pas montrés.

Regarder le code HTML:

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

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

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

Je ne sais pas pourquoi ils ne s'affichent pas.

Voici la référence:

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

Bien, ici, c'est la pleine html:

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

Fonctionne très bien pour moi: jsfiddle.net/ZF7x4
connexes stackoverflow.com/questions/14366158/...
S'il vous plaît essayer une autre version de font-awesome. Par exemple, certaines icônes ne le montrait pas pour moi sur la version 4.3.0, mais ils n'apparaissent sur 4.7.0.
Veuillez consulter stackoverflow.com/a/55977898/4874281 . Espérons que cela aide quelqu'un

InformationsquelleAutor Luis Valdez | 2014-07-23

92

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, le href= partie.

Cependant, sous votre entière html est: est-ce
```
<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
```
Avez-vous essayé de remplacer src= avec href= dans votre html complet pour devenir ce?
```
<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
- Remarque: parfois, vous pourriez voir des cases vides, puis vérifiez que vous avez les css et les polices de fichier dans le même dossier de vérification ceci, l'espoir aide à quelqu'un.
InformationsquelleAutor NathanG
93

Pour les demandeurs de police manquante-impressionnant icônes, j'ai rassemblé quelques idées:
- Assurer que vous utilisez un lien correct pour le CDN, tels 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 le protocole HTTPS, avez-vous un lien pour la police-génial CSS à l'aide du protocole HTTPS (remplacer http:// avec https:// dans le lien ci-dessus).
- Vérifiez que vous n'avez pas d'AdBlock Plus ou uBlock activé. Ils peuvent bloquer certaines des icônes.
- Réinitialiser le cache de votre navigateur. (Sur Chrome faire un looong cliquez sur le bouton de rechargement et sélectionnez Dur Réinitialiser le Cache)
- Assurer que le  ou  élément que vous utilisez, utilise le FontAwesome famille de polices. Par exemple, il ne faut pas juste
```

```
 mais
```

```
 Il ne fonctionnera pas si vous avez quelque chose comme ce qui suit dans votre CSS:
```
* {
font-family: 'Josefin Sans', sans-serif !important; 
}
```
- Si vous êtes en utilisant IE8, êtes-vous à l'aide d'un HTML5 Cale?
- Si cela ne fonctionne pas, il y a d'autres Dépannage Idées sur la Police Génial Wiki.
- J'ajouterai : Vérifiez vos .htaccess n'est pas le blocage de ttf, svg, eot, ou woff extensions
- police remplace! Pas beaucoup de réponses mention de celui-ci. J'ai vérifié et contrôlé et vérifié et enfin compris. J'ai rencontré ce problème dans le passé aussi, et je ne savais pas pourquoi, mais maintenant je sais.
- J'ai manqué d'ajouter l'unique fa comme le nom de la classe de première. Merci. Réponse parfaite pour trouver le problème étape par étape.
- * Sent front * Euh, j'ai oublié d'ajouter le " fa " classe...
- Pour moi, c'était autre chose, réglage de la police-famille
- Pour moi j'ai eu "font-weight: 500" (pour le rendre cohérent avec le thème que j'utilisais). J'ai eu de la mettre à l' "font-weight: bold"
- Vérifiez qu'il n'est pas un navigateur spécifique. Échoué dans Firefox V67. Travaillé comme une page privée dans Firefox, les Développeurs édition (V67). Effacé le cache pour aujourd'hui et puis il a travaillé dans Firefox (v67) normalement. Aussi a bien fonctionné dans google Chrome.
- Merci pour l'astuce! Serait-ce couvert par " Réinitialiser le cache de votre navigateur.'?
- pour moi, c'était une icône cassée - j'ai été en utilisant "af" selon la police génial site, le changer en "fa" et il a très bien fonctionné. Peut-être parce que j'étais en train de la version 4.5.0
InformationsquelleAutor mxro
10

Le mien n'a pas de travail parce que je voulais une icône qui n'a pas été libéré dans la FA la version que j'utilisais.

Cette réponses à la question pourquoi certaines icônes de la montre, mais d'autres non.

Assez évident, mais je suppose que certaines personnes continuent de tomber pour cette. Comme moi.
- Oui, elle donne une réponse à la question.
- Ou vous essayez d'utiliser une police ancienne qui n'existe plus dans la version que vous utilisez. Celle-ci, par exemple, est appelée fois-cercle pas fois-cercle-o qui est l'ancien nom: fontawesome.com/v4.7.0/icon/times-circle-o
- Merci!!!!! Cela a été de me faire tirer mes cheveux toute la journée
InformationsquelleAutor Taiguara Andrade
10

Au début je ne pouvais pas obtenir que cela fonctionne avec Police Impressionnant 5:
```

```
C'est pourquoi je suis venu ici, d'être familier avec la police impressionnant. Alors, quand j'ai regardé, j'ai remarqué que ma question était simplement un problème avec la version.

w3schools m'a aidé dans ce cas.

Nouveau dans la Police Impressionnant 5 est la fas préfixe, la Police Impressionnant 4 utilise fa.

S dans fas signifie solide, et certaines icônes ont un
régulière mode, spécifiée à l'aide du préfixe far.

J'ai déjà remarqué les différents fichiers dans le FontAwesome css dossier, comme:
- tous.min.css
- marques.min.css
- fontawesome.min.css
- régulière.min.css
- solide.min.css
Et c'est quand j'ai réalisé mon erreur. Tout ce que j'avais à faire était d'inclure les css au 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 faire référence à l'élément correct:
```

```
Cette configuration fonctionne pour moi. Bien que pas tous les éléments ont des équivalents dans chaque type. Cela ne fonctionnera pas:
```

```
Comme une note de côté, si vous ne voulez pas faire référence à tous les fichiers séparés alors cela ne sera pas suffisant:
```
<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
```
- En outre, le triche montre les éléments qui sont disponibles pour chaque type d'icône.
InformationsquelleAutor Ruard van Elburg
5

Vous devez utiliser le protocole https pour maxcdn.bootstrapcdn.com. Seulement https sur maxcdn soutien de la SCRO
```
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
```
InformationsquelleAutor Chatchawan Wongsiriprasert
3

À quiconque peut vérifier cela en 2018. Je suis à l'aide de la police génial 4.7.0 et j'ai eu ce problème résolu, en prenant simplement le s dans fas comme on le voit dans le code . C'était à l'origine .

Espère que cette aide.
- En Plus je suis en cours d'exécution de la node.js serveur.
- Mais votre typo, la correction n'est pas une solution
- Nouveau dans la Police Impressionnant 5 est le saf, le préfixe, la Police Impressionnant 4 utilise fa. à Partir de w3schools
InformationsquelleAutor Goodluck Leo
2

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

InformationsquelleAutor lolo

ajoutant que cela a fonctionné pour moi:

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

prendre un coup d'oeil

donc exemple complet est:

HTML:

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

Pas en mesure d'lorsque l'extrait de code est exécuté

InformationsquelleAutor cMinor

1

Si vous utilisez blogger hébergement, l'utilisation de cette adresse url de la feuille de style css:
```
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
```
InformationsquelleAutor Nurdin BM.

Essayer de le ci-dessous deux liens à garder 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">

InformationsquelleAutor Cherry

1

Juste l'ajout de quelques infos pour les réponses ci-dessus en relation avec la mise à jour sur fontawesome,

Si vous utilisez des polices génial 5,

un. simplement copier-coller le HTML ci-dessous,
```
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
```
Remarque: Préférable d'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"></a></li>
```
- Comment servir le css localement au lieu de le relier à la fa site web?
- cela a été mon cas... je n'ai pas eu le fichier js, maintenant ça fonctionne!
InformationsquelleAutor Sundar Gsv
1

Si vous définissez CSS personnalisée, vous devez définir font-weight: 900; pour certains plus récents de la Police Impressionnant de la bibliothèque (à partir de la version 5). Pas de réglage de cette police-poids, il peut montrer carrés.

InformationsquelleAutor jurev
1

le CDN lien que tu avais posté, je suppose, pourquoi il nétait pas en montrant correctement, vous pouvez utiliser celle-ci, il fonctionne parfaitement pour moi.

HTML:
```
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
```
InformationsquelleAutor John Kesh Mahugu
1

J'ai été en mesure d'obtenir de la Police Génial de travailler à l'aide de la tous les.min.fichier css.

InformationsquelleAutor Rob Breidecker
0

Assurez-vous d'inclure le rel et le type comme dans " type= "text/css" dans le lien de la awesomefont fichier css. Sans ces le fichier n'est pas chargé correctement pour moi.

InformationsquelleAutor Elliot Robert

Vous pouvez ajouter ce dans .htaccess dans le répertoire de génial police

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>

InformationsquelleAutor Waleed Hakim

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);
}

InformationsquelleAutor Tran Anh Hien

J'ai testé et ça fonctionne.

Au lieu de cela

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

L'utiliser avec HTTPS

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

InformationsquelleAutor Atif Tariq

0

Notes

Cette réponse est créé lors de la dernière version de fontawesome est v5.* mais fil et npm version de points à v4.* (21.06.2019). En d'autres termes, versions installées par les gestionnaires de paquets est derrière dernière sortie !

Si vous avez installé font-awesome via le gestionnaire de package (fil ou npm) alors, s'il vous plaît être conscient qui version a été installé. Sinon, si vous avez déjà installé font-awesome il y a longtemps puis, vérifier quelle version est installée.

L'installation des polices-génial comme 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é:
```
$ 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é font-awesome de dépendance, vous intégrez l'une de ces deux fichiers source font-awesome.css ou font-awesome.min.css (fondée en node_modules/font-awesome/css/) dans 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 icônes gratuites et que vous recherchez de connexion icône (par exemple). Vous copiez l'icône par exemple , vous le collez dans votre code html et, icône n'est pas affichée, ou est afficher en tant que carré ou rectangle !

Solution

En essence, les versions installées par les gestionnaires de paquets est derrière la version qui est indiqué sur https://fontawesome.com/ site web. Comme vous pouvez le voir, nous avons installé font-awesome v4.7.0 mais, site web montre de la documentation pour font-awesome v5.*. Solution, visitez le site web que les documents d'icônes pour v4.7.0 https://fontawesome.com/v4.7.0, copie icône appropriée, par exemple  et de l'intégrer dans votre code html.
- Ils ont publié un nouveau paquet ici qui a la dernière version. Il est également compatible avec de moins en moins et sass \o/
InformationsquelleAutor Lukasz Dynowski
0

Pour la version 5:

Si vous avez téléchargé le package gratuit de cette site:

https://fontawesome.com/download

Les polices sont dans le tous.css et tous.min.css fichier.

De sorte que votre référence ressemblera à quelque chose comme ceci:
```
<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">
```
La fontawesome.fichier css ne comprend pas la police de référence.

InformationsquelleAutor live-love

-1

Vous besoin d'une police de l'importateur.| essayez

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

InformationsquelleAutor siamwebsite.me

-2

J'ai eu le mien à travailler en modifiant les principaux font-awesome.fichier css. Il a des url à la src (woff, eot, etc...) j'ai dû changer le chemin absolu, par exemple: http://mywebsite.com/font-awesome.woff
Puis il a travaillé!
- Je préfère ne pas recommander ce depuis que vous êtes de l'édition d'un fichier externe. Vous (ou votre équipe) devrez vous en souvenir à chaque fois qu'ils ont besoin de mettre à jour fontawesome.
InformationsquelleAutor crystallove18
-6

Changer cela:
```
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
```
À ceci:
```
<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 de la http: sinon, il ne sait pas ce protocole à utiliser (et utilise le mauvais, file: par exemple, comme un résultat).
- En fait, c'est href, je pensais à du javascript. Mais essayez le nouveau code.
- o_o Post plein format HTML ou au moins les principales pièces. Quelle est la console de dire? Avez-vous essayé l'inspection de l'élément?
- En utilisant // le navigateur sélectionne le protocole que le requérant site utilise. Lorsque votre site est en https, il choisit le protocole https. Si vous êtes en utilisant http, il utilise le protocole http pour demander le fichier à partir de la CAN. Bien sûr, si vous ouvrez le site localement à l'aide de file:///, qui n'est pas recommandé, le navigateur va en effet essayer d'ouvrir la can avec la file protocole.
InformationsquelleAutor Shahar

Vous devez vous connecter pour publier un commentaire.

Notes

Problème

Solution