样式表中的 Font Awesome 5 图标显示为 unicode

Question

我正在尝试像这样集成 FontAwesome：

.accordion:after {
 content: "\f0d7";
 color: #9E3E39;
 font-weight: bold;
 float: right;
 font-size: 15px;
 margin-left: 5px;
 margin-top: -80px;
 font-family: FontAwesome;
}

最终结果是这样的：

\f0d7

这是我们用于 FA 的脚本：

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

这是在基于 invisionfree 的论坛中，使用 bbcode [dohtml] 激活 html 编码。

我做错了什么？我感觉理论上应该都可以吧？

Answer 1

我认为您的 font-family 可能是错误的。请转到 here 并转到 "CSS Pseudo-elements" 部分并 阅读警告 。

看来您需要将 font-family 设置为 font-family: "Font Awesome 5 Solid";

您可能还需要添加这个 script

<script>
  FontAwesomeConfig = { searchPseudoElements: true };
</script>

Answer 2

虽然 JavaScript 版本的 FontAwesome 支持 pseudo-classes，但它们是 not recommended:

因此，您应该使用 CSS 版本：

.accordion:after {
  content: "\f0d7";
  color: #9E3E39;
  font-weight: bold;
  float: right;
  font-size: 15px;
  /*margin-left: 5px;*/
  /*margin-top: -80px;*/
  font-family: FontAwesome;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="accordion">Accordion</div>

或者更好的是，使用 <i> 标签（将其视为 svg 附加样式的目标）：

.accordion svg {
  color: #9E3E39;
  font-weight: bold;
  float: right;
  font-size: 15px;
  font-family: FontAwesome;
}

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="accordion">Accordion <i class="fas fa-caret-down"></i></div>

样式表中的 Font Awesome 5 图标显示为 unicode

Font Awesome 5 icon in stylesheet showing up with unicode

css

font-awesome

font-awesome-5