質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

3回答

1881閲覧

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

Dice_11_65536

総合スコア11

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/02/29 08:37

困っていること

::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に組み込めば、アイコンは表示されています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

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

kit settings

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

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

0

疑似要素で行う場合、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>

関連:
https://teratail.com/questions/242268

投稿2020/03/02 03:10

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Dice_11_65536

2020/03/02 12:46

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

0

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"というフォント名もその方法で調べたものです。 何も表示されないのではなく、四角が表示される、ということはフォントの読み込みに失敗しているということなので、フォント名が怪しいと思ったのですが……。お役に立てず残念です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問