Font Awesome 5 on pseudo elements shows square instead of icon

问题

I am trying to change the content of a span with a Font Awesome icon directly from the CSS page but can't seem to make it work properly.

1) I have imported FA from the documentation and in the <head>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

2) My html looks like this :

<span class='myClass'>Movies</span>

3) Let's now say I would like to change the content of the span with an icon directly from the CSS Page.

My css currently looks like this but it isn't working, it gives me a square instead of the icon.

.myClass {
  visibility: hidden;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: '\f008';
  visibility: visible;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class='myClass'>Movies</span>

Funny thing is that it looks like it is working with some icons. If I test with content: '\f007'; it works. Any idea why?

(And if you wonder why I want to change the icon directly in the CSS, it is because I am using media queries so I can't add it directly in the HTML page)

回答1:

^{Read this if you are using the JS+SVG version: Font Awesome 5 replacement on <li> tag shows empty square}

You need to specify font-weight:900 (or any value bigger than 600, bold or bolder) for this one.

.myClass {
  visibility: hidden;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  visibility: visible;
  font-weight: 900;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<span class='myClass'>Movies</span>

The regular version of the icon, defined by the default font-weight, is PRO so it will show an empty square. What you need is the solid version:

https://fontawesome.com/icons/film?style=solid

Why the other icon is working?

Because the \f007 is this icon : https://fontawesome.com/icons/user?style=regular and as you can see, the regular one is not PRO and is included in the free package so you don't need to specify a font-weight. You only need to specify it when you want to show the solid version.

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f007";
  visibility: visible;
  font-weight: 900;
}

.myClass-1::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f007";
  visibility: visible;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<span class='myClass'>Solid </span>
<br>
<span class='myClass-1'>Regular </span>

As a side note, all the light version are PRO so there is no font-weight for them in the free package.

You can check the documentation for more details : https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements