如何將 Font Awesome 5 Unicode 用於常規和實心星星？

Font Awesome 5 Unicode（用於常規和實心星星）

Font Awesome 5 引入了用於常規和實心星星的“far ”和“fas”前綴圖標，分別。雖然兩個前綴具有相同的 Unicode ('f005')，但它們代表不同的字體粗細。在 CSS 中使用它們時，理解這種區別至關重要。

在您的程式碼片段中，您提到您只能獲得實心星星。這是因為您已將選取和未選取星形狀態的字體粗細設為 900。為了實現預期的行為，讓普通星星最初在點擊時變得穩定，您需要相應地調整字體粗細。

下面更新的 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;
}

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

在如上所述，選中的星形狀態的字體粗細保持在 900，從而形成實心星形。然而，對於未選取的狀態，font-weight 設定為 200，結果是普通的星號。此設定可確保單擊時星星在常規和實心之間變化。

以上是如何將 Font Awesome 5 Unicode 用於常規和實心星星？的詳細內容。更多資訊請關注PHP中文網其他相關文章！