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

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 版本，请阅读：}

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

Answer 2

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

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>

Answer 3

如果您使用包管理器在您的项目中安装 fontawesome（我在 Rails 项目中使用 yarn），您不仅需要导入 js 资源，还需要导入 css 资源:

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

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

Font Awesome 5 shows empty square when using the JS+SVG version

css

font-awesome

font-awesome-5