FontAwesome5でCSSが上手くいかない!きちんと表示する方法

FontAwesome5がリリースされてしばらく経過しました。以前の指定ではCSSが上手く表示出来ない事について困っていたので、きちんと表示できるよう調べたことをご紹介します。

問題は読み込んでいるCDNのjsファイルのせい

公式サイトで「最も簡単+おすすめ」されているCDNでjsファイルを読み込みますが、アイコンを表示する同じHTMLダグ内のclass内に装飾したいcssを指定すると、以前のように上手く表示されません。下記の図のようになってしまいます。

FontAwesome5でCSSが上手くいかない!きちんと表示する方法

FontAwesome5の基本的な使い方を見直す必要があった

検索でFontAwesomeの使用方法を紹介してる各サイトを見ると、以前のバージョンではアイコンを指定しているHTMLタグのclass内にCSSを指定する下記の方法が見つかります。これを参考にFontAwesome5で指定しまうとハマってしまいます。

しかしFontAwesome5でCDNがjsファイル読み込みの現在では、公式サイトの「How to Use(使い方について)」のページ内にある、「Basic Use(基本的な使い方)」を見ると下記の指定で使用するよう書いてありました。

Font Awesome 「How to Use」より引用

ですので、アイコンを指定しているHTMLタグのclass内にCSSを指定するのではなく、アイコンを包含している方のHTMLタグにCSS指定をするとスタイルが継承されるとのことです。

FontAwesome5で困ったら「How to Use」を調べよう

FontAwesomeの仕様が変わり従来の使い方と違う点があり都度調べることがありそうです。公式サイトは英語ですので調べるのが難しく思われますが、chromeブラウザで右クリックすると日本語に翻訳する機能があるので見てみましょう。以上、名駅南のテクノブレイブ名古屋オフィスでした。

料金表ナビゲーション 料金表ナビゲーション

おすすめ記事