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"

品牌 =＆gt;用这个！

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

如果你想在下面使用字体：在CSS选择器之前或之后，你还需要启用Pseudo元素。

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

Answer 4

第1步-在dom就绪的情况下为伪元素注册脚本

window.FontAwesomeConfig = {
    searchPseudoElements: true
}

第2步-使用如下所示的超棒5字体家族（免费使用600以上的字体粗细）

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

＆＃34;之前＆＃34;伪元素在Font awesome v.5中不起作用

4 个答案: