我試圖直接從 CSS 頁面更改帶有 Font Awesome 圖標的 span 的內(nèi)容，但似乎無法使其正常工作。
1) 我已經(jīng)從文檔和
<link rel="stylesheet" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
2）我的 html 看起來像這樣：
<span class='myClass'>Movies</span>
3) 現(xiàn)在假設(shè)我想直接從 CSS 頁面更改帶有圖標的范圍的內(nèi)容。
我的 css 目前看起來像這樣，但它不起作用，它給了我一個正方形而不是圖標。
.myClass {
font-size:25px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: 'f008';
}
<link rel="stylesheet" > <span class='myClass'></span>
有趣的是，它看起來像是在使用一些圖標。如果我用 content: 'f007'; 進行測試，它會起作用。知道為什么嗎？
（如果你想知道為什么我想直接在 CSS 中更改圖標，那是因為我使用媒體查詢，所以無法直接在 HTML 頁面中添加它）
2
0
0
來自您的評論：
使用透明顏色測試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" > <span class='myClass'></span> <span class='myClass'></span> <span class='myClass bis '></span> <u> <span class='myClass bis '></span></u>
如果您使用的是 JS+SVG 版本，請閱讀以下內(nèi)容：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" > <span class='myClass'></span>
