"before" 伪元素在 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 见 documentation

更新 2：TL;DR

font-family错了

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

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

已更新，因为您使用 css 网络字体：

对于具有 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 选择器的字体，你还需要启用伪元素..

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

Answer 4

步骤 1 - 在 dom 上注册伪元素脚本

window.FontAwesomeConfig = {
    searchPseudoElements: true
}

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

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

"before" 伪元素在 Font awesome v.5 中不起作用

The "before" pseudo element not working in Font awesome v.5

css

font-awesome-5