首頁 > web前端 > css教學 > 如何使用 CSS 自訂 Font Awesome 5 星圖示?

如何使用 CSS 自訂 Font Awesome 5 星圖示?

DDD
發布: 2024-10-24 11:33:02
原創
1052 人瀏覽過

How to Customize Font Awesome 5 Star Icon Using CSS?

使用CSS 自訂Font Awesome 5 星形圖示

在Font Awesome 5 中,星形圖示有兩種變體:fas (實心)和遠(常規)。這些變體可以透過它們的 Unicode 值 (f005) 來區分,它們可用於建立一個評級系統,其中星星最初顯示為輪廓,然後在單擊時填充。

定義固體和常規樣式CSS,您可以使用 font-weight 屬性。透過設定為 900,可以使星星變得實心,透過設定為較低的值(例如 200),可以使它們成為規則的輪廓。

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

label.star:before {
  font-weight: 200;
}</code>
登入後複製

此程式碼根據字體粗細調整是否選取星形複選框。當勾選該複選框時,星號會變成實心,當不勾選時,星號將保持輪廓。

請注意,font-family 屬性應設為 'Font Awesome 5 Free' 以確保正確顯示圖示。

以上是如何使用 CSS 自訂 Font Awesome 5 星圖示?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板