“之前”伪元素在 Font Awesome v.5 中不起作用

Question

我究竟做错了什么？

 body {
  font-family: arial;
  font-size: 1.5rem;
}

li.facebook:before {
  content: "\f09a";
  font-family: FontAwesome;
}

li {
  list-style: none;
}

 <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet" />
<ul>
  <li class="facebook">123 Drive.</li>
  <li><i class="fab fa-twitter-square"></i> Twitter</li>
</ul>

原文由 Labanino 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新 3：

font-family 是错误的。

使用 font-family: "Font Awesome 5 Brands"

也许你必须设置一个 font-weight 见 文档

更新 2： TL；DR

font-family 是错误的。

使用 font-family: "Font Awesome 5 Brands"

---

对于 Font Awesome 5 ，这必须是以下之一：

更新是因为您使用 css webfonts：

对于使用 CSS 的方法 Web 字体

自由的

font-family: "Font Awesome 5 Free"

临

font-family: "Font Awesome 5 Pro"

品牌 => 使用这个！

 font-family: "Font Awesome 5 Brands"

见这里： https ://jsfiddle.net/nwodoo32/1/

---

对于带有 Javascript 的方法 SVG

坚硬的

font-family: "Font Awesome 5 Solid"

常规的

font-family: "Font Awesome 5 Regular"

品牌

font-family: "Font Awesome 5 Brands"

光（专业版）

 font-family: "Font Awesome 5 Light"

原文由 mfgmicha 发布，翻译遵循 CC BY-SA 4.0 许可协议