Awesome 5 font on pseudo-elements shows a square instead of an icon

Question

Awesome 5 font on pseudo-elements shows a square instead of an icon

I am trying to change the contents spanusing the Font Awesome icon right from the CSS page, but cannot make it work properly.

1) I imported FA from the documentation and into <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 that I would like to change the contents of the range with the icon right from the CSS page.

My CSS currently looks like this, but it doesn't work, it gives me a square instead of an 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>

Run code Hide result

The funny thing is that it looks like it works with some icons. If I test with content: '\f007';it works. Any ideas why?

(And if you're wondering why I want to change the icon directly in CSS, this is because I use media queries, so I can’t add it directly to the HTML page)

+15

html css pseudo-element font-awesome font-awesome-5

nsayer 10 . '18 13:26

1

Temani Afif · Accepted Answer · 2018-04-10T13:36:03+0000

^{, JS + SVG: Font Awesome 5 <li>}

font-weight:900 ( , 600, bold bolder) .

.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>

Hide result

regular , font-weight , PRO, . , solid :

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

?

\f007 - : https://fontawesome.com/icons/user?style=regular, , , regular PRO, , font-weight. , solid .

.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>