


Comment utiliser Unicode pour les icônes 5 étoiles Font Awesome avec les classes « far » et « fas » ?
Oct 24, 2024 am 10:10 AMUnicode pour les icônes Font Awesome 5 étoiles : utilisation des classes 'far' et 'fas'
Font Awesome 5 propose à la fois des fonctionnalités régulières et solides icônes étoiles, représentées par les valeurs Unicode « f005 » pour les deux. Pour utiliser ces variations dans votre système de notation, vous pouvez utiliser CSS pour basculer entre les classes « loin » et « fas ».
La classe « fas » représente l'étoile solide, tandis que « loin » représente l'étoile normale. . La clé pour basculer entre eux réside dans l’ajustement de l’épaisseur de la police. En définissant l'épaisseur de la police sur 900 pour l'étoile cochée et 200 pour l'étoile non cochée, vous pouvez basculer sans effort entre les versions solides et normales, respectivement.
Voici un extrait de code mis à jour qui en tient compte :
<code class="css">input.star:checked ~ label.star:before { content: '\f005'; color: #e74c3c; transition: all .25s; font-family: 'Font Awesome 5 Free'; font-weight: 900; } label.star:before { content: '\f005'; font-family: 'Font Awesome 5 Free'; font-weight: 200; }</code>
Ce code garantit que l'icône étoile est régulière lorsqu'elle n'est pas cochée et solide lorsqu'elle est cochée, vous permettant de créer facilement un système de notation dynamique et interactif.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques

Faire votre première transition Svelte personnalisée

Téléchargement de fichiers avec Multer dans Node.js et Express
