【3つある】FontAwesomeが効かない時の原因と対処法【CSS】

【3つある】FontAwesomeが効かない時の原因と対処法【CSS】


Notice: Undefined offset: 1 in /home/yuuuugablog/yuuuugablog.com/public_html/wp-content/themes/sango-theme-child/functions.php on line 81

こんにちは、ゆうがです。
先日引用ボックスを作るためにCSSをやっていたら、FontAwesomeが効かなくて萎えたので、

今回は、FontAwesomeが効かない時の対処法を解説していきます。

それでは、さっそくいきましょう!

スポンサーリンク

FontAwesomeが効かない時の原因と対処法

結論は下記の3つ

  • CDNのバージョンが最新じゃない
  • font-familyの指定をしていない
  • \ ←バックスラッシュをつけていない
[code_balloon position=”left” name=”ゆうが” text=”上記はぼくも結構やりがちなミスでした。” img=”https://yuuuugablog.com/wp-content/uploads/2020/11/yuga_Original-1.jpg”]

では、それぞれの対処法を見ていきましょう。

CDNのバージョンが最新じゃない

これはシンプルにこちらの公式サイトFont Awesomeから最新のCDNをコピーして、headタグの直上に記載しましょう。

ちなみに最新版のコードはこちら

HTML

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

最新版じゃないと機能しないフォントもあるそうなので、最新にしておきましょう。

font-familyの指定をしていない

よくあるのが、こちらのfont-familyを指定していないです。

正しくは、こちらのコードのように書けばOKです。

css

font-family: "Font Awesome 5 Free";

こちらのコードを貼り付ければ、表示されます。

[code_balloon position=”left” name=”ゆうが” text=”僕自身、このコードを書いた瞬間効くようになりました。” img=”https://yuuuugablog.com/wp-content/uploads/2020/11/yuga_Original-1.jpg”]

\ ←バックスラッシュをつけていない

最後によくあるのがこちら、\をつけてないで書いていることです。

たとえば、こんな感じ

間違いの例

css

content:"f16d";

これじゃあ、FontAwesomeは効きませんね。
なので、正しくはこれ

正しい例

css

content:"\f16d";

こちらはきちんと\←バックスラッシュをつけているので効きます。

それでは今回は以上です。
記事が参考になれば幸いです。