Q&A
fontawesomeのバージョンと取得先をご提示ください。
また、HTMLはなるべく全体ご提示いただいた方がそのまま現象再現できます。
「表示できません」とは実際はどうなっているのか（何も表示されないか、何かは表示されているか）を含めて質問本文に追記してください。
html
1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .warning::before { 7 content: '\f071'; 8 font-family: "Font Awesome 5 Free"; 9 font-weight: 900; 10 } 11 </style> 12 <script src="https://kit.fontawesome.com/b0d6bffff7.js"></script> 13 </head> 14 <body> 15 <span class="warning"></span> 16 </body> 17 <script src="js/main.js"></script> 18 </html>
以上がコードです。
Versionは5.9です。
取得先、、というのはこちらのURLのことでしょうか？https://fontawesome.com/icons/exclamation-triangle?style=solid
画面では
□
このような白い正方形がでてきます。
どなたかこの問題の原因がわかる方、よろしくお願いします。
回答1件
ベストアンサー
回答ありがとうございます。
all.cssというのは、
.warning::before {
all: initial;
content: '\f071';
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
このようなallプロパティのことでしょうか？
いいえ。回答に貼ったリンクは見られましたでしょうか？
Font Awesomeの本体CSSを読み込ませる必要があるということです。
※ちなみに私の方は回答に書いたall.cssを読み込ませてマークの正常表示が確認できています
無事にできました！ありがとうございました！
解決されたようで何よりです。
いずれにしてもアイコンフォントという特性上、CSSによる加工は入ります。
ドキュメントを読んでいくようにしてください。
あなたの回答
tips
プレビュー
