如何在CSS偽元素中正確設定Font Awesome 5圖示的字體系列？

為Font Awesome 5 個偽元素選擇正確的字體系列

在CSS 偽元素中使用Font Awesome 圖示時，選擇正確的字體系列以確保圖示正確顯示至關重要。正如您所遇到的，使用不正確的字體系列可能會導致圖示不顯示。

Font-Family 屬性中的多種字體

解決方案在於利用font-family 屬性中的多種字體。透過這樣做，瀏覽器將在每個指定的字體系列中搜尋圖標，直到找到匹配項。在這種情況下，您可以使用：

font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free";

實體和常規圖示的字體系列

與您的假設相反，兩者的字體系列實心和常規圖示是“Font Awesome 5 Free”，而不是“Font Awesome 5 Solid”。實體圖示和常規圖示之間的差異在於字體粗細，而不是字體系列。

免費圖示與專業圖示

您也注意到，並非所有常規圖示圖示是免費的。有些包含在 Font Awesome 的 PRO 包中。因此，如果圖示未顯示，請仔細檢查其在免費計劃下的可用性。

範例程式碼

為了說明正確的用法，請考慮以下範例：

.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.icon1:before {
  content: "\f099"; /* TWITTER ICON */
  font-weight: 400;
}

.icon2:before {
  content: "\f095"; /* PHONE ICON */
  font-weight: 900;
}

.icon3:before {
  content: "\f095"; /* PHONE ICON */
  font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css">

<div class="icon1 icon"></div>
<div class="icon2 icon"></div>
<br>

<div class="icon3 icon"></div>

以上是如何在CSS偽元素中正確設定Font Awesome 5圖示的字體系列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！