Ceci est similaire à celui de «l'icône apparaît comme une question carrée», mais la mine fonctionne lorsque vous utilisez «Fa Fa-Child», etc., mais pas lorsque j'utilise l'ID de référence d'image.
dans ma mise en page J'ai: css: p> uniquement en utilisant "\ f500" dans mon CSS le brise (il montre juste un carré), Toutefois, l'utiliser dans le code comme ci-dessous fonctionne bien: P> <i class="fas fa-smile fa-2x text-white"></i>
3 Réponses :
Je ne suis pas sûr sans Codepen ou quelque chose que quelque chose, mais je pense que le problème peut avec Si vous vérifiez ce qui est à l'intérieur du fichier Fontaweome gardez à l'esprit, que si vous installez une version plus récente de FA sur votre fournisseur, votre code pourrait être cassé. Font-famille , car dans all.min.csss FF est défini comme .FAS {Font-famille: "Font génial 5 gratuit"} . Vous pouvez donc essayer de changer de famille de polices à cette valeur dans votre code. all.min.css , vous verrez que la police La face est définie comme
<environment include="Development">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</environment>
Use :font-family:
.my-button-blue:before {
content: "\f500";
font-family: "Font Awesome 5 Free";
position: absolute;
color: white;
top: 50%;
left: 50%;
font-weight: 900;
font-size: 20px;
Merci - cela a du sens, mais cela n'a pas corrigé le problème :(
Avez-vous un REFTO le CDN? >> && essayer d'ajouter> Poids de la police: 900; Taille de la police: 20px; Utilisez.fontawesome.com/ Communiqués / V5.8.1 / CSS / ALL.CSS "Intégrité =" SHA384-50OBUHEMVPQ + 1LW4Y57PTFMHCAXP0ML5D60M1M7UH2 + NQUIVZIEBHNDOJK28AN VF "Crossorigin =" Anonyme ">
essayé que au lieu de mon local - n'a pas fait la différence
Retirez votre CSS local Utilisez le CDN, puis ajoutez la taille et le poids comme dans la réponse mise à jour
J'ai essayé le CDN un au lieu de local - ne fait aucune différence. Malheureusement, je ne peux pas l'utiliser dans la production, car mon site est dans un environnement hors ligne. Mon code mis à jour a maintenant la forme de polices et de la forme de police comme ci-dessus.
et n'utilisez pas tout.min au développement
Tous travaillent maintenant - devinez que mon cas n'était pas d'effacement correct sur le dernier changement, merci!
Pourquoi ne pas utiliser tout cela pendant le développement?
Avec l'aide de la console de développeur du navigateur moderne, vous pouvez vérifier quelles sont les propriétés CSS appliquées à l'icône avec classe. Vous pouvez utiliser ces propriétés CSS pour définir vos propres cours et les utiliser comme vous le souhaitez.
Voici un échantillon pour celui-ci. P>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <i class="fas fa-smile fa-2x text-white"></i> <i class="my-button my-button-blue"></i>
J'ai regardé le CSS comme ça - et ça a l'air bien. C'est juste que mon icône est une place étrange au lieu d'un sourire. Merci pour le CSS supplémentaire.
Êtes-vous capable de reproduire cela en utilisant un violon ou quelque chose de similaire?