Maison > interface Web > tutoriel CSS > Comment utiliser différentes icônes étoiles Unicode dans Font Awesome 5 ?

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

Mary-Kate Olsen
Libérer: 2024-10-24 10:16:29
original
480 Les gens l'ont consulté

How to Use Different Unicode Star Icons in 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>
Copier après la connexion

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>
    Copier après la connexion
  2. Créer une entrée de case à cocher avec une classe étoile :

    <code class="html"><input type="checkbox" class="star"></code>
    Copier après la connexion
  3. Ajouter une étiquette avec une classe étoile à côté de la case à cocher :

    <code class="html"><label class="star"></label></code>
    Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal