Comment utiliser différentes icônes étoiles Unicode dans Font Awesome 5 ?

Système de notation par étoiles Unicode de Font Awesome 5 : Régulier ou Solide

Dans Font Awesome 5, les icônes d'étoiles régulières et solides ont des valeurs Unicode distinctes ( ) mais diffèrent dans leur apparence en fonction de leur poids de police.

Code CSS pour échanger les versions Star :

Pour basculer entre les versions régulières et solides en étoile à l'aide de CSS, il suffit ajustez l'épaisseur de la police :

<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; /* Solid star */
}

label.star:before {
  content: '\f005';
  font-family: 'Font Awesome 5 Free';
  font-weight: 200; /* Regular star */
}</code>

Mise en œuvre :

Pour utiliser ce système de notation par étoiles :

1. Inclure la police Fichier CSS génial :

   <code class="html"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"></code>

2. Créer une entrée de case à cocher avec une classe étoile :

   <code class="html"><input type="checkbox" class="star"></code>

3. Ajouter une étiquette avec une classe étoile à côté de la case à cocher :

   <code class="html"><label class="star"></label></code>

En utilisant le code CSS ci-dessus, cliquer sur la case à cocher basculera entre l'étoile normale (poids de la police : 200) et l'étoile solide (poids de la police : 900).

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!