為什麼 Font Awesome 5 在使用 JS 和 SVG 作為項目符號時顯示空方塊？

Font Awesome 5 用JS SVG 顯示空方塊

當嘗試使用Font Awesome 5 替換無符號序列表中的標準項目點符號序列表中的標準項目點符號序列表中的標準項目點符號序列時，您可能會遇到一個空方塊而不是所需的圖示。使用 JavaScript 和 SVG 版本的函式庫時可能會出現此問題。

解決方案

要解決此問題，請確保您使用的是最新版本的 Font Awesome 5 （v5.13.0 或更高版本）。此版本引入了在 JS 版本中使用偽元素的功能。

要啟用偽元素的使用，請將 data-search-pseudo-elements 屬性加入到 JavaScript <script> 中。標籤：</script>

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

修改的 CSS

要顯示 Font Awesome 圖標，您需要隱藏預設的偽元素並針對 SVG 元素進行樣式設定：

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  display: none; /* Hide the pseudo element */
}

/* Target the SVG for styling */
.testitems svg {
  color: #004d00;
  margin: 0 5px 0 -15px;
}

已修改HTML

您的HTML 程式碼保持不變，因為修改後的CSS 現在將正確定位SVG 元素：

<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>

範例用法

為了示範工作解決方案，您可以將 替換為以下內容代碼：

<li class="testitems"><i class="fa fa-user"></i>List Item 1</li>

這將顯示一個藍色的使用者圖示作為第一個清單項目的項目符號點。

以上是為什麼 Font Awesome 5 在使用 JS 和 SVG 作為項目符號時顯示空方塊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！