Bagaimana Menggunakan Font Awesome 5 Unicode untuk Bintang Biasa dan Solid?

Font Awesome 5 Unicode untuk Bintang Biasa dan Solid

Fon Awesome 5 memperkenalkan awalan 'jauh' dan 'fas' untuk biasa dan pepejal ikon, masing-masing. Walaupun kedua-dua awalan mempunyai Unicode yang sama ('f005'), ia mewakili berat fon yang berbeza. Memahami perbezaan ini adalah penting apabila menggunakannya dalam CSS.

Dalam coretan kod anda, anda menyebut bahawa anda hanya mendapat bintang yang kukuh. Ini kerana anda telah menetapkan berat fon kepada 900 untuk kedua-dua keadaan bintang yang ditandai dan tidak ditanda. Untuk mencapai gelagat yang diingini iaitu mempunyai bintang biasa pada mulanya yang menjadi pepejal apabila diklik, anda perlu melaraskan berat fon dengan sewajarnya.

CSS yang dikemas kini di bawah mengendalikan perkara ini:

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

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

Dalam di atas, berat fon untuk keadaan bintang yang ditandakan kekal pada 900, menghasilkan bintang pepejal. Walau bagaimanapun, untuk keadaan tidak ditandai, berat fon ditetapkan kepada 200, menghasilkan bintang biasa. Persediaan ini memastikan bintang berubah antara biasa dan pepejal apabila diklik.

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