Bagaimana untuk Menyesuaikan Font Ikon 5 Bintang Hebat Menggunakan CSS?

Menyesuaikan Ikon 5 Bintang Font Hebat dengan CSS

Dalam Font Awesome 5, ikon bintang terdapat dalam dua variasi: fas (pepejal) dan jauh (biasa). Variasi ini boleh dibezakan dengan nilai Unicodenya (f005), dan ia boleh digunakan untuk mencipta sistem penilaian di mana bintang pada mulanya muncul sebagai garis besar dan kemudian diisi apabila diklik.

Untuk menentukan gaya pepejal dan biasa dalam CSS, anda boleh menggunakan sifat font-weight. Dengan menetapkannya kepada 900, anda boleh menjadikan bintang pepejal dan dengan menetapkannya kepada nilai yang lebih rendah (seperti 200), anda boleh menjadikannya garis besar biasa.

<code class="css">input.star:checked ~ label.star:before {
  font-weight: 900;
}

label.star:before {
  font-weight: 200;
}</code>

Kod ini melaraskan berat fon berdasarkan sama ada kotak semak bintang ditandakan atau tidak. Apabila kotak pilihan ditandakan, bintang itu menjadi pepejal dan apabila ia tidak ditandakan, bintang itu kekal sebagai garis besar.

Perhatikan bahawa sifat fon-family harus ditetapkan kepada 'Font Awesome 5 Free' untuk memastikan yang betul ikon dipaparkan.

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