使用JS + SVG版本时，Font Awesome 5显示空白方块

  • Z时代
  • 2024-01-10
  • 分类：问答

试图用Font Awesome图标替换列表项标签上的项目符号类型，但出现一个空的正方形：

ul {
  list-style: none;
}
.testitems {
  line-height: 2em;
}
.testitems:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  margin: 0 5px 0 -15px;
  color: #004d00;
  display: inline-block;
}
<script src="https://use.fontawesome.com/releases/v5.12.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>

我知道字体库正在加载，因为我能够使用<i class="fas fa-check-circle"></i><li

class="testitems">List Item 1</li>并且字体呈现正确（尽管样式不正确）。

回答：

如果您使用的是 阅读以下内容：FontAwesome5，为什么CSS内容没有显示？

使用Font Awesome 5的最新版本，您可以通过添加data-search-pseudo-elements如下内容来将伪元素与JS版本一起使用：

ul {
  list-style: none;
}
.testitems {
  line-height: 2em;
}
.testitems:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  display:none; /* We need to hide the pseudo element*/
}
/*target the svg for styling*/
.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>
<i class="fa fa-user"></i>

您可以查看文档以了解更多详细信息：

如果您使用我们的SVG + JS框架渲染图标，则需要做一些额外的事情：

使用我们的SVG + JS框架时，默认情况下，禁用CSS伪元素来呈现图标。您需要将<script data-search-pseudo-

elements ... >属性添加到<script />调用Font Awesome 的元素中。

由于我们的JS会找到每个图标引用（使用伪元素样式）并将图标自动插入页面的DOM中，因此我们需要隐藏渲染的由CSS创建的真实伪元素。

以上是 使用JS + SVG版本时，Font Awesome 5显示空白方块 的全部内容， 来源链接： utcz.com/qa/404884.html

回到顶部