使用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> 并且该字体正确呈现（尽管没有正确样式）。

- Elcid_91

---

是的！正在加载JS版本。我会下载CSS版本并尝试一下。感谢您的提示。 - Elcid_91

Temani - 不确定你最后一条评论的意思。 - Elcid_91

Answer 1

如果你正在使用CSS版本，请阅读以下内容：Font Awesome 5，为什么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 />元素中调用Font Awesome的<script data-search-pseudo-elements ... >属性添加到其中。

将伪元素的显示设置为none

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

- Temani Afif

Answer 2

如Font Awesome文档中所述，如何启用伪类...

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems::before {
  font-family: "Font Awesome 5 Solid";
  content: "\f058";
  display: none;
}
.user::before{
  font-family: "Font Awesome 5 Solid";
  content: "\f007";
  display: none;
}

<script>FontAwesomeConfig = { searchPseudoElements: true };</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/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><br>
<a class="user" href="#">User</a>

- Eli Peters

Answer 3

如果您在项目中使用软件包管理器（我在Rails项目中使用yarn）安装fontawesome，则不仅必须导入js资源，还必须导入css资源：

import "@fortawesome/fontawesome-free/js/all"
import "@fortawesome/fontawesome-free/css/all"

- Iwan B.