Bagaimana untuk Menggunakan Ikon Bintang Unicode Berbeza dalam Font Awesome 5?

Sistem Penarafan Bintang Unikod Fon Awesome 5: Biasa lwn. Pepejal

Dalam Font Awesome 5, ikon bintang biasa dan pepejal mempunyai nilai unikod yang berbeza ( ) tetapi berbeza dalam penampilannya berdasarkan berat fonnya.

Kod CSS untuk Tukar Versi Bintang:

Untuk bertukar antara versi bintang biasa dan pepejal menggunakan CSS, hanya laraskan berat fon:

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

Pelaksanaan:

Untuk menggunakan sistem penarafan bintang ini:

1. Sertakan Fon Fail CSS yang hebat:

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

2. Buat input kotak semak dengan kelas bintang:

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

3. Tambah label dengan kelas bintang seterusnya ke kotak pilihan:

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

Dengan menggunakan kod CSS di atas, mengklik pada kotak pilihan akan bertukar-tukar antara bintang biasa (berat fon: 200) dan bintang pepejal (berat fon: 900).

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan Ikon Bintang Unicode Berbeza dalam Font Awesome 5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!