CSS伪元素中的Font Awesome没有显示 [英] Font Awesome in CSS pseudo elements not showing

问题描述

我在html/php索引中链接了字体真棒的免费版本CSS，因此，如果我直接在该页面上调用任何FA图标，它们都可以正常工作.

I have the font-awesome free version css linked in my html/php index, so if I call any FA icons on that page directly they work fine.

但是，我正在尝试将其应用于CSS中的伪元素，但无法使其正常工作.它仅显示一个空的正方形/框.

However, I'm trying to apply some to pseudo elements in my css and I can't get it to work. It only shows an empty square/box.

我看了看文档，并用单引号和双引号进行了尝试，但是无论它还是一个空的正方形.

I've looked at the docs and I've tried this with single and double quotes, but no matter what it's an empty square still.

每个人都清楚我在做什么错吗?

Is it clear to anyone what I'm doing wrong here?

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

VERY最少的Codepen，大部分CSS和JS都被删除了 https://codepen.io/anon/pen/yEeZWX

VERY Minimal codepen, most CSS and JS stripped out https://codepen.io/anon/pen/yEeZWX

推荐答案

字体家族应指定Free.
另请注意，对于纯色图标，您必须使用font-weight:900

The Font family should specify Free.
Also note that for solid icons you would have to use 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没有显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！