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