我試圖直接從 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 頁面更改帶有圖示的範(fàn)圍的內(nèi)容。
我的 css 目前看起來像這樣，但它不起作用，它給了我一個(gè)正方形而不是圖標(biāo)。
.myClass {
font-size:25px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: 'f008';
}
<link rel="stylesheet" > <span class='myClass'></span>
有趣的是，它看起來像是在使用一些圖示。如果我用 content: 'f007'; 進(jìn)行測(cè)試，它會(huì)起作用。知道為什麼嗎？
（如果你想知道為什麼我想直接在 CSS 中更改圖標(biāo)，那是因?yàn)槲沂褂妹襟w查詢，所以無法直接在 HTML 頁面中添加它）
2
0
0
來自您的評(píng)論：
使用透明顏色測(cè)試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 版本，請(qǐng)閱讀以下內(nèi)容：Font Awesome 5 顯示為空使用JS SVG版本時(shí)為正方形
#您需要新增
字體粗細(xì)：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>
