使用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中文網其他相關文章!