为什么我的 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中文网其他相关文章！