擬似要素のFont Awesome 5にアイコンではなく正方形が表示される
spanのコンテンツをFont AwesomeアイコンでCSSページから直接変更しようとしていますが、正しく機能させることができないようです。
1）ドキュメントおよび<head>から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 {
visibility: hidden;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: '\f008';
visibility: visible;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class='myClass'>Movies</span>おかしいのは、いくつかのアイコンで動作しているように見えることです。 content: '\f007';でテストすると、動作します。理由は何ですか？
（そして、なぜCSSで直接アイコンを変更したいのか疑問に思うなら、それはメディアクエリを使用しているのでHTMLページに直接追加できないからです）
JS + SVGバージョンを使用している場合は、これをお読みください： <li>タグのFont Awesome 5の置換で空の四角が表示される
これにはfont-weight:900（または600、boldまたはbolderより大きい値）を指定する必要があります。
.myClass {
visibility: hidden;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f008";
visibility: visible;
font-weight: 900;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<span class='myClass'>Movies</span>デフォルトのfont-weightで定義されているregularバージョンのアイコンはPROであるため、空の四角が表示されます。必要なのはsolidバージョンです：
https://fontawesome.com/icons/film?style=solid
他のアイコンが機能しているのはなぜですか？
\f007はこのアイコンであるため： https://fontawesome.com/icons/user?style=regular そして、ご覧のとおり、regular 1つはPROではなく、無料パッケージに含まれているため、font-weightを指定する必要はありません。 solidバージョンを表示する場合にのみ指定する必要があります。
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f007";
visibility: visible;
font-weight: 900;
}
.myClass-1::after {
font-family: 'Font Awesome 5 Free';
content: "\f007";
visibility: visible;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<span class='myClass'>Solid </span>
<br>
<span class='myClass-1'>Regular </span>補足として、すべてのlightバージョンはPROであるため、無料パッケージにはfont-weightはありません。
詳細についてはドキュメントを確認できます： https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
関連する質問