HTML CSS 入門
Tips

「FontAwesome 5」が表示されないときの原因と対処法

By Halu36 / 2021年3月2日

Font Awesome 5を使用している時にアイコンがうまく表示されない時の原因と対処法を紹介します。

CDNコードURLと貼り付け位置が間違っていないか？

根本的な問題ですが、CDN自体がURLの誤りなどでうまく読み込まれていなかったり、貼り付けている位置が間違っていると「Font Awesome」自体が機能していないため、アイコンが表示されません。

まずは、URLと貼り付け位置が間違っていないか確認しましょう。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">

貼り付け位置については、<head>～</head>内に記載するのが一般的です。

もし、<head>～</head>以外の部分に貼り付けている場合はうまく読み込まれていない可能性があるので、Googleのデベロッパーツールでコンソールエラーが出ていないかなど確認してみましょう。

CDNバージョンが古くなっていないか？

FontAwesomeでは頻繁にアップデートが行われていますので、古いCDNを読み込んでいた場合アイコンが表示されない場合があります。

公式サイトで常に最新のCDNが更新されていますので、もし古いCDNを読み込んでいる方は公式サイトで公開されているCDNで貼り替えてみてください。

FontAwesome

使いたいアイコンがCDNのバージョンに対応しているか？

FontAwesome

使いたいアイコンの右上のバージョンが表示されているかと思います。

  1. Updated：Version 0.0.0
  2. Added：Version 0.0.0

主に上記の2つのいずれかの書き方をされていますが、読み込んでいるCDNがこのバージョンよりも古いと正常に表示されない可能性があります。

そのため、やはりCDNのバーションは最新版を記載することをおすすめします。

有料版のアイコンを使用していないか？

Font Awesomeには無料版と有料版のアイコンがあります。

検索をした時に最初は無料アイコンと有料アイコンが混在した形で表示されますので、サイドメニューで「Free」を選択して無料版のみに絞り込みましょう。

プロ版の契約をしていないのに有料アイコンを貼り付けても、当然ですが表示されません。

CSSでFont Awesomeを使用している場合

Font Awesomeの旧バージョン（Font Awesome4）から使用しており、なおかつCSSでFontAwesomeの設定をしている場合、下記の修正が必要です。

Note

  1. font-familyの書き方が旧バージョンと違うので、font-family: “Font Awesome 5 Free”;に書き直す
  2. 文字の太さを指定する
  3. contentは「\（バックスラッシュ）」付きのUnicodeを使うこと

上記2点を反映すると下記のようなCSSになるかと思います。

font-family: “Font Awesome 5 Free”;
content: “\f14e”;(アイコンのコード)
font-weight: bold;

②の文字の太さについては、FontAwesome5の特定のアイコンではfont-weightを指定しないと上手く表示されないものがあるそうです。

そのため、文字の太さを指定する必要があるようです。

Follow me!

こちらの記事はいかがですか

カテゴリー