Font Awesome in CSS pseudo elements not showing [duplicate]

问题

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.

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 Minimal codepen, most CSS and JS stripped out https://codepen.io/anon/pen/yEeZWX

回答1:

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>

回答2:

Use "Free" in font-family: "Font Awesome 5 Free";

I use also display: inline-block; to set them side by side

Hre is working JSFiddle to your code: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>

来源：https://stackoverflow.com/questions/50681748/font-awesome-in-css-pseudo-elements-not-showing

标签

css

font-awesome

font-awesome-5