【2019年】CSSでFontAwesomeが表示されない原因と解決策

こんにちは、けんぞうです。
CSSでFontAwesomeが表示されない6つの原因と解決策を、解説します。

動画解説

動画でも解説しましたので、良かったらご覧ください。


それぞれの原因については、以下の時間で解説しています。必要なところだけご覧頂ければと思います。

各原因の解説箇所
  • 原因①:CDN読み込み漏れ 1:12
  • 原因②:content書き方間違い 2:05
  • 原因③:font-family指定漏れ 3:00
  • 原因④:font-weight指定漏れ 3:45
  • 原因⑤:有料アイコンを使用 4:36
  • 原因⑥:font-family指定間違い 5:40

けんぞう

TwitterなどのSNSアイコンが表示されない場合は、原因⑥である可能性が高いです。

 

CSSでFontAwesomeが表示されない原因

以下の6つが考えられます。必要に応じて読み飛ばしてください。

CSSでFontAwesomeが表示されない6つの原因
  • 原因①:CDN読み込み漏れ
  • 原因②:content書き方間違い
  • 原因③:font-family指定漏れ
  • 原因④:font-weight指定漏れ
  • 原因⑤:有料アイコンを使用
  • 原因⑥:font-family指定間違い

それぞれ解説します。

 

原因①:CDN読み込み漏れ

こちらのリンクから、CDN読み込みコードを取得し、headタグ内に書き込んでください

HTML
<head>
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

原因②:content書き方間違い

バックスラッシュ(\)でunicodeを書いているか、確認しましょう

CSS
content: '\f108';
バックスラッシュではなく、スラッシュ(/)で書いてしまっているパターンがよくあります。

原因③:font-family指定漏れ

font-familyをきちんと指定できいるかどうか確認しましょう。正しい記述は以下です。

CSS
.pc:before {
	font-family: "Font Awesome 5 Free"; 
	content: '\f108';
}

原因④:font-weight指定漏れ

現在のFontAwesomeでは、font-weightの指定も必要です。以下のような指定を行ってください。

CSS
.pc:before {
	font-family: "Font Awesome 5 Free"; 
	content: '\f108';
        font-weight:700;
}

原因⑤:有料アイコンを使用

課金しない限り、有料アイコンは利用できません

FontAwesomeページで、以下のようにPROと書かれている場合には、有料なので使用できないです。

原因⑥:font-family指定間違い

ソーシャルアイコンなどの場合は、font-family:Font Awesome 5 Brandsと書きます

CSS
.twitter:before {
	font-family: "Font Awesome 5 Brands"; 
	content: '\f108';
        font-weight:700;
}

Twitterのアイコンなどを利用したい場合は、以下のように書きます。

けんぞう

僕はこれを知らずに2日間くらい悩みました、、

 

まとめ

改めて以下の6つです。

おさらい
  • 原因①:CDN読み込み漏れ
  • 原因②:content書き方間違い
  • 原因③:font-family指定漏れ
  • 原因④:font-weight指定漏れ
  • 原因⑤:有料アイコンを使用
  • 原因⑥:font-family指定間違い

これらすべてをチェック項目のように確認していくと、FontAwesomeは表示できるはずです。

どうか、挫折しませんように、、

宣伝

Youtubeチャンネルで、プログラミング初心者がつまづきやすいポイントを解説しています。よかったらチャンネル登録お願いしまーす