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

Question

试图用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>并且字体呈现正确（尽管样式不正确）。

Answer 1

如果您使用的是 CSS版本，请 阅读以下内容：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创建的真实伪元素。