css - Font Awesome 5 在使用 JS+SVG 版本时显示空方 block

Question

尝试用 Font Awesome 图标替换列表项标签上的元素符号类型，但我得到一个空方 block :

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 版本，请阅读:Font Awesome 5, why css content is not showing?}

使用 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>

您可以查看 documentation了解更多详情:

If you’re using our SVG + JS framework to render icons, you need to do a few extra things:

Enable Pseudo Elements

Using CSS Pseudo elements to render icons is disabled by default when using our SVG + JS Framework. You’ll need to add the <script data-search-pseudo-elements ... > attribute to the <script /> element that calls Font Awesome.

Set Pseudo Elements’ display to none

Since our JS will find each icon reference (using your pseudo element styling) and insert an icon into your page’s DOM automatically, we’ll need to hide the real CSS-created pseudo element that’s rendered.