CSS伪元素中的Font Awesome未显示[重复]答案

【问题标题】：Font Awesome in CSS pseudo elements not showing [duplicate]CSS伪元素中的Font Awesome未显示[重复]
【发布时间】：2018-11-13 20:35:23
【问题描述】：

我的 html/php 索引中链接了字体很棒的免费版 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

【问题讨论】：

你能在 codepen 或类似的环境中隔离问题吗？
字体有试用、品牌还是免费的，不确定solid是否可用...font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";
@CameronHurd 没想到，只是添加了一个非常精简的版本
@G-Cyr 是的，我目前将它们全部用于 CSS，但仍然没有
好的，可能与字体大小有关；）codepen.io/anon/pen/zarbYj

标签： css font-awesome font-awesome-5

【解决方案1】：

在font-family: "Font Awesome 5 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>

【讨论】：

【解决方案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>

【讨论】：

谢谢，我接受这个，因为它解释了手头的问题，但是，我还必须使用 JS 将伪元素设置为 true
这似乎只在您通过 Web 字体和 CSS 方法（link 标签）而不是 SVG 和 JS 框架（script 标签）加载时才有效。
@Todd 是的，因为只有 Web 字体和 CSS 方法使用 FONT。 SVG 和 JS 是使用 SVG 文件而不是 FONT 呈现的。
解决了我的问题。