Font Awesome 5 zeigt auf Pseudoelementen ein Quadrat anstelle eines Symbols an

Question

Ich versuche, den Inhalt des span mit dem Font Awesome-Symbol direkt auf der CSS-Seite zu ändern, aber es scheint mir nicht zu gelingen.

1) Ich habe FA aus der Dokumentation importiert und

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

2) Mein HTML sieht so aus:

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

3) Nehmen wir nun an, ich möchte den Inhalt eines Bereichs mit einem Symbol direkt auf der CSS-Seite ändern.

Mein CSS sieht derzeit so aus, aber es funktioniert nicht, es zeigt mir ein Quadrat anstelle eines Symbols an.

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

Interessanterweise sieht es so aus, als würden einige Symbole verwendet. Wenn ich mit content: 'f007'; teste, funktioniert es. Weißt du, warum?

(Wenn Sie sich fragen, warum ich das Symbol direkt in CSS ändern möchte: Das liegt daran, dass ich Medienabfragen verwende und es daher nicht direkt in die HTML-Seite einfügen kann)

Answer 1

来自您的评论：

使用透明颜色测试text-lines以获得更薄的渲染：

.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

^{如果您使用的是 JS+SVG 版本，请阅读以下内容：Font Awesome 5 显示为空使用JS+SVG版本时为正方形}

您需要添加

字体粗细：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>