Webアイコンフォント「FontAwesome 5」が表示されないときの原因と対処法

Web制作

Webアイコンフォント「FontAwesome 5」が表示されないときの原因と対処法

2018年11月07日 12:00　

Webアイコンフォント「FontAwesome 5」が表示されないときの原因と対処法

こんにちは！社員Aです👩

今回は、Webアイコンフォントでおなじみの「FontAwesome 5」がサイト上でうまく表示されないときの原因と対処法をご紹介します。

Webアイコンフォントとして有名なFontAwesome 5
FontAwesome 5がうまく表示されないときの対策
まとめ

Webアイコンフォントとして有名なFontAwesome 5

Webアイコンフォントと言えば「FontAwesome」と言われるほどWEB業界ではよく使われていますよね。

導入から表示までがとっても簡単なので、私も制作の際はほぼ全案件で使っているくらい重宝しています。

今回は、Font Awesome 5を使用している時にアイコンがうまく表示されない時の原因と対処法をまとめていきたいと思います。

FontAwesome 5がうまく表示されないときの対策

ここからは、Font Awesome 5を使用している時にアイコンがうまく表示されない時の原因と対処法をまとめていきます。

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

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

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

◆CDNの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を読み込んでいた場合アイコンが表示されない場合があります。

特に2018年にFont Awesome 4から5にアップデートされていますので、この関係で表示されていない可能性もあります。

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

公式サイトへ

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

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

Updated：Version 0.0.0
Added：Version 0.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

Webアイコンフォントと言えば「FontAwesome」と言われるほどよく使われており、簡単にアイコンフォントを導入できることで多くのユーザーから愛用されていますが、頻繁にアップデートが行われていますので、急にアイコンが表示されなくなったりしてしまう場合があります。

そんな時に改善できる対策や原因などをいくつかご紹介しました。

これからも新しいアイコンなどの追加も含めアップデートされていくと思いますので、また新しいエラーや対処法が分かり次第こちらにも追記していきたいと思います！

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺

Webアイコンフォント「FontAwesome 5」が表示されないときの原因と対処法