问题
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 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;
}
回答3:
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>
来源：https://stackoverflow.com/questions/47894414/the-before-pseudo-element-not-working-in-font-awesome-v-5