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

【问题标题】：Font Awesome 5 shows empty square when using the JS+SVG versionFont Awesome 5 使用 JS+SVG 版本时显示空方块
【发布时间】：2020-03-21 03:37:50
【问题描述】：

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

【问题讨论】：

是的！加载 JS 版本。将 DL CSS 版本并试一试。感谢您的提示。
Temani - 不知道你最后的评论是什么意思。

标签： css font-awesome font-awesome-5

【解决方案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了解更多详情：

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

启用伪元素

使用我们的 SVG + JS 框架时，默认禁用使用 CSS 伪元素呈现图标。您需要将 <script data-search-pseudo-elements ... > 属性添加到调用 Font Awesome 的 <script /> 元素。

将伪元素的显示设置为无

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

【讨论】：