Je crée un portefeuille de sites Web à l'aide d'un modèle HTML. Je n'ai pas beaucoup d'expérience avec css, mais après avoir importé le fichier css font-awesome à la fois sous forme de lien et de fichier dans mon projet django, les icônes apparaissent sous forme de petites boîtes. Je sais que le fichier css est reconnu car lorsque je le commente, les cases disparaissent. Je pense qu'il y a peut-être quelque chose de plus profond avec le CSS que je ne comprends pas.
Je soupçonne qu'il se passe quelque chose dans le fichier css principal si quelqu'un peut m'aider. Merci!
Voici le code du modèle:
<link rel="stylesheet" type='text/css' href="{% static "css/main.css" %}" />
<!-- <link rel="stylesheet" href="{% static "css/all.css" %}" > -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
Voici ce que j'ai importé:
<ul class="special">
<li><i class="fab fa-pencil" title="Edit"></i></li>
<li><a href="#" class="icon fa-search"><span class="label">Magnifier</span></a></li>
<li><a href="#" class="icon fa-tablet"><span class="label">Tablet</span></a></li>
<li><a href="#" class="icon fa-flask"><span class="label">Flask</span></a></li>
<li><a href="#" class="icon fa-cog"><span class="label">Cog?</span></a></li>
</ul>
3 Réponses :
Mettez-le au-dessus de tous les css et essayez de l'utiliser sans paramètres d'intégrité et de crossorigin car même un petit changement par les développeurs sur le fichier peut ne pas correspondre à l'intégrité et crossorigin que vous avez sur votre site Web, donc il ne sera pas utilisé. > XXX
Vous devez utiliser la classe fas et celle du crayon ne s'affichera pas car elle appartient au package PRO 1 ( https://fontawesome.com/icons/pencil?style=solid )
p>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"> <ul class="special"> <li><i class="far fa-pencil" title="Edit"></i></li> <li><a href="#" class="far fa-search"><span class="label">Magnifier</span></a></li> <li><a href="#" class="far fa-tablet"><span class="label">Tablet</span></a></li> <li><a href="#" class="far fa-flask"><span class="label">Flask</span></a></li> <li><a href="#" class="far fa-cog"><span class="label">Cog?</span></a></li> </ul>
ul a {
text-decoration:none;
font-size:25px;
}
Vous ne pouvez pas utiliser la version standard de ces icônes far car elles appartiennent toutes au package PRO 2 donc elles ne s'affichera pas
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"> <ul class="special"> <li><i class="fas fa-pencil" title="Edit"></i></li> <li><a href="#" class="fas fa-search"><span class="label">Magnifier</span></a></li> <li><a href="#" class="fas fa-tablet"><span class="label">Tablet</span></a></li> <li><a href="#" class="fas fa-flask"><span class="label">Flask</span></a></li> <li><a href="#" class="fas fa-cog"><span class="label">Cog?</span></a></li> </ul>
ul a {
text-decoration:none;
font-size:25px;
}
https://fontawesome.com/icons/tablet?style=regular
https://fontawesome.com/icons/search ? style = regular
https://fontawesome.com / icons / flask? style = regular
https: / /fontawesome.com/icons/cog?style=regular
1 Comme vous pouvez le voir ci-dessous, toutes les versions de cette icône sont PRO donc là Il n'y a aucun moyen d'utiliser cette icône avec le package gratuit:
2 Comme vous pouvez le voir ci-dessous, seule la version solide n'est pas PRO donc seule celle-ci est inclus dans le package Free contrairement aux 2 autres.
Questions connexes:
Font Awesome 5 sur les pseudo éléments affiche un carré au lieu d'une icône
Font Awesome 5 Choix de la famille de polices correcte dans les pseudo-éléments
Merci! Cela semblait faire l'affaire pour les faire apparaître. Deux d'entre eux sont traversés par d'étranges lignes noires qui disparaissent lorsque l'animation .js est activée ...
@KennyWorkman probablement il y a plus de CSS impliqué? pouvez-vous créer un violon avec tout votre code?
Conservez les fichiers fontawesome dans votre répertoire local (asset / fontawesome) Ensuite, chargez fontawesome avec statique
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css'%}">
Vous pouvez vérifier ce dépôt github ici
Est-ce que vos fichiers de polices font-awesome (woff, ttf) dans le même répertoire que le CSS? Vous pouvez également essayer de remplacer par ex.
class = "icon fa-search"avecclass = "icon fa fa-search"Ouvrez votre console et recherchez les lignes rouges vous informant des fichiers de polices manquants.
all.csssuppose que les fichiers de polices sont là, avec le même chemin relatif que celui que vous avez téléchargé à partir du site Web fontawesome.Oui, ils sont dans le même répertoire. J'ai essayé ces modifications en vain.