css - “之前”伪元素在 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>

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"

Answer 2

您必须更改字体系列，还必须定义字体粗细。

<ul>
<li class="facebook"> Facebook</li>
<li><i class="fab fa-twitter-square"></i> Twitter</li>
</ul>

li.facebook:before {
    content: "\f09a";
    font-family: "Font Awesome 5 Brands"; /* change like this */
    font-weight: 900; /* insert this definition */
}
li {
  list-style:none;
}

Answer 3

如果要将字体与 :before 或 :after CSS 选择器一起使用，还需要启用 Pseudo 元素。

<script>
   window.FontAwesomeConfig = {
      searchPseudoElements: true
   }
</script>

Answer 4

第 1 步- 在 dom 就绪时为伪元素注册脚本

window.FontAwesomeConfig = {
    searchPseudoElements: true
}

第 2 步- 使用 font-awesome 5 字体系列，如下所示（免费使用 font-weight 以上 600）

.class:before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    content: "\f105";
}