為什麼我的 Font Awesome 5 圖示在偽元素上呈現為正方形？

Font Awesome 5 圖示在偽元素上渲染為方形

在某些情況下，嘗試透過CSS 使用Font Awesome 圖示動態變更span 元素的內容的用戶可能會遇到圖示呈現為正方形而不是預期圖示的問題。

識別問題

提供的CSS 程式碼示範了該問題：

.myClass {
  font-size:25px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: '\f008';
}

但是，此CSS 將圖示顯示為正方形而不是指定的圖示（'f008' ）。

了解解決方案

要解決此問題，CSS 程式碼必須包含以下內容property:

font-weight: 900

最終的CSS 程式碼如下：

.myClass {
  font-size:45px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  font-weight: 900;
}

透過指定字體粗細為900，圖示將在偽元素上正確渲染。

以上是為什麼我的 Font Awesome 5 圖示在偽元素上呈現為正方形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！