Comment utiliser Font Awesome 5 Unicode pour les étoiles régulières et solides ?

Font Awesome 5 Unicode pour les étoiles régulières et solides

Font Awesome 5 introduit les préfixes « far » et « fas » pour les étoiles régulières et solides icônes, respectivement. Bien que les deux préfixes aient le même Unicode (« f005 »), ils représentent des épaisseurs de police différentes. Comprendre cette distinction est crucial lors de leur utilisation en CSS.

Dans votre extrait de code, vous avez mentionné que vous n'obteniez que des étoiles solides. En effet, vous avez défini le poids de la police sur 900 pour les états d'étoile cochés et non cochés. Pour obtenir le comportement souhaité consistant à avoir initialement une étoile régulière qui devient solide au clic, vous devez ajuster le poids de la police en conséquence.

Le CSS mis à jour ci-dessous gère cela :

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

Dans Comme ci-dessus, le poids de la police pour l'état d'étoile coché reste à 900, ce qui donne une étoile solide. Cependant, pour l'état non coché, le poids de la police est défini sur 200, ce qui donne une étoile normale. Cette configuration garantit que l'étoile passe de régulière à solide lorsque vous cliquez dessus.

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!