Blogger Labo： font-awesomeのアイコンが□で表示される原因と対処法


当サイトのテンプレートにはfont-awesome（フォントオーサム）というアイコンフォントを使用しています。このフォントは外部からファイルを読み込んで表示するもので、<head>タグにこれを読み込むコードを書いておけば自分のサイト内で使うことができます。


しかし、読み込むための記述を間違いなく書いておいたとしても、サイト内で使用した時にアイコンの読み込み失敗を意味する □ で表示されてしまうことがあります。なので、今回はBloggerにおいて このエラーが発生する原因と対策について書き残しておこうと思います。



原因


設定したタグとfont-awesomeのバージョンが違う


現在ではフリーで使えるfont-awesomeのバージョンには4系と5系があるようです。


当サイトのテンプレートには5系を使っているのですが、場合によってはアイコンを呼び出すためのコードが異なることがあり、特にCSSでcontentプロパティで設定した時なんかはバージョンの違いによって上手く表示されないという不具合が起きやすいです。


適切なfont-weightになっていない


font-awesomeをCSSのcontentプロパティで設定した際に □ で表示されてしまうことが往々にしてあります。この原因の一つに適切なfont-weightが設定されてないというものがあります。


font-awesomeのアイコンには font-weight:600; と font-weight:900; でアイコンの見た目が変わるように設定されているものがあります。そうしたアイコンが上手く表示されない場合は、大体font-weightを設定忘れが原因っぽいです。


対策


適切なバージョンのfont-awesome CDNを読み込む


font-awesomeのアイコンを呼び出すコードは、CDNのバージョンによって異なることがあるようです。なので、font-awesomeの5系のアイコンと4系のアイコンを同時に読み込みたい場合は下記のように両方のバージョンのCDNを読み込ませることで一応回避できます。


ただし、これらは外部からファイルを読み込むものなので、こういうやり方はページの表示速度に影響するものと思われます。なので、応急処置的な方法として使えるだけで、きちんとしたいならアイコンコードをバージョンに沿ったものに書き直す必要が出てきます。


<!-- font-awesome CDN -->

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

<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>


バージョンに沿ったアイコンコードに書き直す


font-awesomeはCDNを読み込んでアイコンを呼び出すコードを記述することでアイコンを呼び出すことができますが、バージョンによって記法が異なるものがあるようです。特にCSSのcontent属性で呼び出す場合に使われるUnicodeが異なることが多いので、CSSでアイコンを設定している場合はバージョン変更に伴って記述を書き換える必要があります。


このアイコンコードは、下記のサイトで4系と5系のそれぞれに対応したコードを検索できるようなので、バージョンを変えたことで非表示になるエラーが出た場合は、これを使ってエラーの出たアイコンのコードを書き換えてみてください。


【Ver.4, Ver.5対応】Font Awesome アイコンを日本語で検索！クリック１つでコードをコピー【アイコン一覧】

FontAwesomeのアイコンを日本語で検索！最新のバージョン５と旧バージョンのアイコンにも対応しています。それぞれバージョンごとに検索出来るようにアップデートしました。


適切なfont-weightを設定する


font-awesomeをCSSのcontentプロパティで設定した際に、アイコンの読み込みに失敗して □ で表示されてしまうエラーが起こることがあります。これはバージョンの違いにかかわらず起こってしまうのですが、これの原因は大抵 font-weightプロパティ が適切に設定されていないからです。


なので、font-weightプロパティを正しく設定することで、このエラーを回避することが出来ます。なお、font-weightの値は大体600か900に設定されているので、このいずれかで設定して様子を見てみてください。記述例は以下の通りです。


/* fooというセレクタにfont-awesomeを設定する */

.foo::before {

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  content: "\f10d";

  font-size: 18px;

  color: #000;

}


備考


font-awesomeのアイコンの読み込みが遅い


Bloggerの場合だけかもしれませんが、font-awesomeのCDNは<head>タグ内に記述しないと読み込みが遅れるようです。なので、読み込めるのに表示が遅いという場合は「<head>タグ以外の場所に記述されたCDNを参照している」という可能性があります。


今回の記事を書くことになった出来事として、昔作ったテンプレートの<head>タグに記述したCDNを4系から5系にバージョンアップところ、アイコンの読み込みが遅くなったという現象が起こりました。そこで、原因の特定を図ったところ、CSSのcontentプロパティが4系のままの記述になっており、これがガジェットに設定された4系のCDNを参照して表示されているということが分かりました。


なので、<head>タグ内で読み込んだfont-awesomeのCDNをバージョンアップするならば、4系のコードを5系のものに書き換える、あるいは、4系のCDNも同時に読み込むということでエラー回避ができるということが分かりました。