CSS 伪元素中的 Font Awesome 未显示

Question

我的 html/php 索引中链接了很棒的字体 css，所以如果我直接调用该页面上的任何 FA 图标，它们都可以正常工作。

但是，我试图将一些应用到我的 css 中的伪元素，但我无法让它工作。它只显示一个空的 square/box.

我查看了文档并尝试使用单引号和双引号，但无论如何它仍然是一个空方块。

有人清楚我在这里做错了什么吗？

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-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>

Answer 2

字体系列应指定 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>

CSS 伪元素中的 Font Awesome 未显示

Font Awesome in CSS pseudo elements not showing

css

font-awesome

font-awesome-5