Unicode pour les icônes 5 étoiles Font Awesome : 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 :

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

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.