為什麼我的 Font Awesome 5 圖示顯示為空方塊，如何修復？

Font Awesome 5 JS SVG 版本中的空方塊：揭示根本原因

嘗試透過JS SVG 將Font Awesome 圖示合併到列表項目中版本導致某些使用者出現空白方塊。此問題源自於庫對偽元素的依賴。

使用偽元素解決問題

使用最新版本的Font Awesome 5，您可以啟用偽元素- 透過合併「data-search-pseudo-elements」屬性來使用元素。這指示庫在 CSS 中搜尋偽元素。

修訂的程式碼片段

要實現此解決方案，請修改您的程式碼如下：

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  display: none;
}

.testitems svg {
  color: blue;
  margin: 0 5px 0 -15px;
}

<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>

<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>

此修改後的程式碼隱藏了偽元素並針對SVG 進行樣式設置，從而能夠正確顯示圖示。

以上是為什麼我的 Font Awesome 5 圖示顯示為空方塊，如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！