伪元素上的 Font Awesome 5 显示方形而不是图标

Question

我试图直接从 CSS 页面更改带有 Font Awesome 图标的 span 的内容，但似乎无法使其正常工作。

1) 我已经从文档和

中导入了 FA

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

2）我的 html 看起来像这样：

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

3) 现在假设我想直接从 CSS 页面更改带有图标的范围的内容。

我的 css 目前看起来像这样，但它不起作用，它给了我一个正方形而不是图标。

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

有趣的是，它看起来像是在使用一些图标。如果我用 content: 'f007'; 进行测试，它会起作用。知道为什么吗？

（如果你想知道为什么我想直接在 CSS 中更改图标，那是因为我使用媒体查询，所以无法直接在 HTML 页面中添加它）

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>