偽元素上的 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>