如何在 Font Awesome 5 中使用不同的 Unicode 星形圖示？

Font Awesome 5 Unicode 星級評級系統：常規與實心

在Font Awesome 5 中，常規和實心星形圖示具有不同的unicode 值( ） ，但根據字體粗細，它們的外觀有所不同。

用於交換星形版本的CSS 代碼：

要使用CSS 在常規星形版本和實心星形版本之間切換，只需簡單地調整字體粗細：

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

實作：

要使用此星級評分系統：

1. 包含字體很棒的CSS 檔案：

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

   登入後複製

2. 建立一個帶有星號類別的複選框輸入：

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

   登入後複製

3. 新增帶有帶有星號類別的標籤複選框旁：

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

   登入後複製

透過使用上面的CSS 程式碼，點選複選框將在常規星號（字體粗細：200）和實心星星（字體粗細：900）。

以上是如何在 Font Awesome 5 中使用不同的 Unicode 星形圖示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！