WorPress　CSS疑似要素　font-awesomeのアイコンが表示されない

困っていること

::beforeの擬似要素で与えたfont-awesomeのアイコンが◻︎の表示になってしまいます。
CSSは以下です。
考えられる原因を教えてください。

.ul_check .li_check::before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
  font-weight: 900;
}

ちなみに、headにkit.fontawsome.com/~.jsを読み込ませて使っています。
HTMLに組み込めば、アイコンは表示されています。

行動規範の内容に同意します

回答3件

もうご存じかもしれませんがCSSの疑似要素では、KitのWebフォントは非対応です。どうしても使いたい場合は、headでCDNからCSS読み込みを行ってください。詳しくは以下URLを参考にどうぞ。
https://tadtadya.com/new-usage-of-font-awesome-5/

前の方の解答を補足しておきます。
kit settingsにおいてtechnologyをSVGに設定する必要があります。
そのうえで以下のコードを書くと表示はされます。
しかし、前の方もおっしゃっているようにパフォーマンスが著しく下がるので避けた方が無難です。

html
1<!doctype html>
2<html>
3  <head>
4    <script data-search-pseudo-elements defer src="キットコード" crossorigin="anonymous"></script>
5    <style>
6      ul {
7        list-style-type: none;
8      }
9
10      .ul_check .li_check::before{
11        display: none;
12        content: "\f00c";
13        font-family: "Font Awesome 5 Free";
14        font-weight: 900;
15      }
16
17      .ul_check .li_check svg {
18        position: absolute;
19        left : 1em;
20        color: #ffb03f;
21      }
22    </style>
23  </head>
24
25  <body>
26    <ul class = "ul_check">
27      <li class = "li_check">check</li>
28    </ul>
29  </body>
30</html>

投稿2020/03/02 15:26

編集2020/03/02 16:28

soliste16

総合スコア757

Dice_11_65536

2020/03/04 11:28

ご回答ありがとうございます。ご教示の通りにしたところ、表示されました。しかし、著しくパフォーマンスが低下するとのことなので、使用は避けようと思います。ありがとうございました。

行動規範の内容に同意します

疑似要素で行う場合、script 要素に data-search-pseudo-elements 属性をつけて、CSS では display: none; とする必要があります。JS 版はアイコンが svg 要素に置き換わるため、スタイルは svg に適用させます。

CSS
1.ul_check .li_check::before {
2  display: none;
3  content: "\f00c";
4  font-family: "Font Awesome 5 Free";
5  font-weight: 900;
6}
7
8.ul_check .li_check svg {
9  position: absolute;
10  left : 1em;
11  color: #ffb03f;
12}

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#with-svg-js

公式では擬似要素は複雑で間違いやすいと暗に使わないようにほのめかしているし、data-search-pseudo-elements 属性をつけるとパフォーマンスが劣化するのでおすすめしません。次のように書いたほうが簡単です。

HTML
1<i class="fas fa-check"></i>

投稿2020/03/02 03:10

x_x

総合スコア13749

Dice_11_65536

2020/03/02 12:46

いろいろと試してはみましたが、どれもうまくいきませんでした… おとなしくHTMLに書き込んで使うようにします。ありがとうございました。

行動規範の内容に同意します

font-familyの指定が間違っているのではないでしょうか。手元でfont-awesomeのfree版のjsを読み込ませたところ、font-family名は"Font Awesome 5 Pro"となっていました。
"Font Awesome 5 Free"というのはHTMLに組み込んだアイコンと同じフォント名になっていますか？

投稿2020/02/29 15:26

hwatarig

総合スコア461

Dice_11_65536

2020/03/01 13:45

ご回答、ありがとうございます。 ``` .ul_check .li_check::before { font-family: "Font Awesome 5 Pro"; content: "\f00c"; position: absolute; left : 1em; /*左端からのアイコンまで*/ color: #ffb03f; /*アイコン色*/ font-weight: 900; } ``` 上記も試しましたが、やはり表示されません。ちなみに、FontAwesomeのYourKitsのページでは「FontAwesomeFree」と表示されています。使ったアイコンはチェックマークのアイコンで、「SolidStyle」となっているのでFREE版のアイコンで間違いないはずです。整合性はとれているはずなのですが…

hwatarig

2020/03/01 14:46

> HTMLに組み込めば、アイコンは表示されています。 HTMLに組み込んだアイコンにかかっているスタイルはどうなっていますか？

Dice_11_65536

2020/03/02 12:48

HTMLに組み込んだアイコンには、何のスタイルも適用していません。別の方から提案された方法も試しては見ましたが、どれもうまくいきませんでした… おとなしくHTMLに書き込んで使うようにします。お手数おかけしました、ありがとうございました。

hwatarig

2020/03/02 14:25

HTMLに組み込んだアイコンにどういうスタイルがかかっているのか、検証ツールで確認してみてください、という意味でした。それと同じ書き方をすれば表示されるはずです。実際、自分で手元で試した限りではそれで大丈夫でした。"Font Awesome 5 Pro"というフォント名もその方法で調べたものです。何も表示されないのではなく、四角が表示される、ということはフォントの読み込みに失敗しているということなので、フォント名が怪しいと思ったのですが……。お役に立てず残念です。

行動規範の内容に同意します

あなたの回答