困っていること
::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ページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
もうご存じかもしれませんが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総合スコア757
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>
投稿2020/03/02 03:10
総合スコア13749
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
font-familyの指定が間違っているのではないでしょうか。手元でfont-awesomeのfree版のjsを読み込ませたところ、font-family名は"Font Awesome 5 Pro"となっていました。
"Font Awesome 5 Free"というのはHTMLに組み込んだアイコンと同じフォント名になっていますか?
投稿2020/02/29 15:26
総合スコア461
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/01 13:45
2020/03/01 14:46
2020/03/02 12:48
2020/03/02 14:25
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/04 11:28