字体很棒的CSS伪元素没有显示[重复]

Question

这个问题在这里已有答案：

• Font Awesome 5 on pseudo elements shows square instead of icon 1回答
• Font Awesome 5 - Choosing the correct font-family in CSS pseudo-elements 1回答

我在我的html / php索引中链接了font-awesome免费版css，所以如果我直接调用该页面上的任何FA图标，它们都可以正常工作。

但是，我正在尝试在我的CSS中应用一些伪元素，但我无法使其工作。它只显示一个空的方框/框。

我看过文档，我用单引号和双引号试了这个，但无论它是什么，它仍然是一个空方格。

任何人都清楚我在这里做错了吗？

a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
font-family: "Font Awesome 5 Solid";
content: "\f106";
font-weight: 400;
display: block;
position: absolute;
right: 20px;
font-size: 0.6em;
}

a[aria-expanded="true"]::before {
font-family: "Font Awesome 5 Solid";
content: "\f106";
}

非常简单的codepen，大多数CSS和JS剥离了https://codepen.io/anon/pen/yEeZWX

Answer 1

Font系列应指定Free。 另请注意，对于实体图标，您必须使用font-weight:900

a[data-toggle="collapse"] {
  position: relative;
}

a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
  font-family: "Font Awesome 5 Free";
  content: "\f106";
  font-weight: 900;
  display: block;
  position: absolute;
  right: 20px;
  font-size: 0.6em;
}

a[aria-expanded="true"]::before {
  font-family: "Font Awesome 5 Solid";
  content: "\f106";
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<div class="wrapper">
  <nav id="sidebar">
    <li class="active">
      <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
        <i class="far fa-file-alt"></i> Pages
      </a>
    </li>
  </nav>
</div>

Answer 2

在font-family: "Font Awesome 5 Free";中使用“Free” 我还使用display: inline-block;将它们并排放置 Hre正在使用JSFiddle代码：https://jsfiddle.net/8vge3rkv/

a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
font-family: "Font Awesome 5 Free";
content: "\f106";
font-weight: 900;
display: inline-block;
}

a[aria-expanded="true"]::before {
font-family: "Font Awesome 5 Solid";
content: "\f106";
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">


<a href="#" aria-expanded="false">try me</a>