The “before” pseudo element not working in Font aw

问题:

What am I doing wrong?

<ul>
<li class="facebook"> Facebook</li>
<li><i class="fab fa-twitter-square"></i> Twitter</li>
</ul>

li.facebook:before {
    content: "\f09a";
    font-family: FontAwesome;
}
li {
  list-style:none;
}

JSFiddle: https://jsfiddle.net/labanino/nwodoo32/

回答1:

UPDATE 2: TL;DR

The font-family is wrong.

use font-family: "Font Awesome 5 Brands"

---

For Font Awesome 5 this must be one of the following:

Updated because you use css webfonts:

For method Web Fonts with CSS

Free

font-family: "Font Awesome 5 Free"

Pro

font-family: "Font Awesome 5 Pro"

Brands => use this!

font-family: "Font Awesome 5 Brands"

See here: https://jsfiddle.net/nwodoo32/1/

---

For method SVG with Javascript

Solid

font-family: "Font Awesome 5 Solid"

Regular

font-family: "Font Awesome 5 Regular"

Brands

font-family: "Font Awesome 5 Brands"

Light (Pro)

font-family: "Font Awesome 5 Light"

回答2:

You also need to enable the Pseudo elements if you want to use the font with :before or :after CSS selectors..

<script>
   window.FontAwesomeConfig = {
      searchPseudoElements: true
   }
</script>

回答3:

You must change your font family and also you must define font weight.

<ul>
<li class="facebook"> Facebook</li>
<li><i class="fab fa-twitter-square"></i> Twitter</li>
</ul>

li.facebook:before {
    content: "\f09a";
    font-family: "Font Awesome 5 Brands"; /* change like this */
    font-weight: 900; /* insert this definition */
}
li {
  list-style:none;
}