為Font Awesome 5 個偽元素選擇正確的字體系列
在CSS 偽元素中使用Font Awesome 圖示時,選擇正確的字體系列以確保圖示正確顯示至關重要。正如您所遇到的,使用不正確的字體系列可能會導致圖示不顯示。
Font-Family 屬性中的多種字體
解決方案在於利用font-family 屬性中的多種字體。透過這樣做,瀏覽器將在每個指定的字體系列中搜尋圖標,直到找到匹配項。在這種情況下,您可以使用:
1 |
|
實體和常規圖示的字體系列
與您的假設相反,兩者的字體系列實心和常規圖示是“Font Awesome 5 Free”,而不是“Font Awesome 5 Solid”。實體圖示和常規圖示之間的差異在於字體粗細,而不是字體系列。
免費圖示與專業圖示
您也注意到,並非所有常規圖示圖示是免費的。有些包含在 Font Awesome 的 PRO 包中。因此,如果圖示未顯示,請仔細檢查其在免費計劃下的可用性。
範例程式碼
為了說明正確的用法,請考慮以下範例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
1 2 3 4 5 6 7 |
|
以上是如何在CSS偽元素中正確設定Font Awesome 5圖示的字體系列?的詳細內容。更多資訊請關注PHP中文網其他相關文章!