"之前"的伪元素在Font awesome v.5中不起作用

Question

我究竟做错了什么？

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

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

JSFiddle:https://jsfiddle.net/labanino/nwodoo32/

Answer 1

更新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;
}