Fon Hebat 5 pada elemen pseudo memaparkan segi empat sama bukannya ikon

Question

Saya cuba menukar kandungan span dengan ikon Font Awesome terus dari halaman CSS tetapi nampaknya tidak dapat membuatnya berfungsi.

1) Saya telah mengimport FA daripada dokumentasi dan

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

2) html saya kelihatan seperti ini:

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

3) Sekarang katakan saya mahu menukar kandungan julat dengan ikon terus dari halaman CSS.

Css saya pada masa ini kelihatan seperti ini, tetapi ia tidak berfungsi, ia memberi saya segi empat sama bukannya ikon.

.myClass {
  font-size:25px;
}

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

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

Menariknya, ia kelihatan seperti menggunakan beberapa ikon. Jika saya menguji dengan content: 'f007'; ia berkesan. Kamu tahu kenapa?

(Jika anda tertanya-tanya mengapa saya mahu menukar ikon terus dalam CSS, ini kerana saya menggunakan pertanyaan media jadi saya tidak boleh menambahnya secara langsung dalam halaman HTML)

Answer 1

Dari komen anda:

Menguji dengan warna lutsinartext-lines untuk paparan yang lebih nipis:

.myClass {
  font-size: 45px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  font-weight: 900;
  -webkit-text-stroke;
  transparent 0.2em;
}

.myClass+.myClass::after {
  -webkit-text-stroke: white 0.02em;
}

.bis {
  font-size: 4rem;
  color: blue
}

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

Answer 2

^{Jika anda menggunakan versi JS+SVG, sila baca yang berikut: Font Awesome 5 kelihatan kosong dan segi empat sama apabila menggunakan versi JS+SVG}

Anda perlu menambah

字体粗细：900

.myClass {
  font-size:45px;
}

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

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