Question

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

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

＆＃13;

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";
}

＆＃13;

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

＆＃13;

Answer 2

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

字体很棒的CSS伪元素没有显示

2 个答案: