FontAwesomeでアイコンが表示されない時の確認事項7選

CSS

FontAwesomeという便利なツールがあります。
アイコンを画像ではなく文字として扱うことができるので、大きさや色などをcssで自由にカスタマイズできちゃうという優れものです。

FontAwesomeはもちろんWordPressでも使うことができます。
アイコンの種類は下の公式ページから見ることができます。

Font Awesome公式ページ

こんな風にいろんなかわいいアイコンが、FontAwesomeを使うと簡単に表示できちゃいます。
使い方はCDNを使うやり方、実際にファイルをDLして使うやり方の2通りありますが、CDNを使う方がお手軽なのでオススメします。

FontAwesomeの使い方

使い方は簡単で、

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

これを<head>内にコピペするだけです(2019年2月28日時点最新)

あとは使いたいアイコンを選んで、HTMLファイルの中に

<i class="fas fa-bread-loaf"></i>

のようなコードを記述するだけです。

CSSで書く場合(つまりなんらかの要素のafterやbeforeにアイコンをつけたい場合)は、unicodeというそのアイコンを示す番号(?)みたいものを使って

a[target="_blank"]:after {
	font-family: 'Font Awesome 5 Free';
	content: '\f35d';
	font-weight: 900;
	font-size:0.9em;
	}

のように書いてあげるといいですね。
ここで

font-familiyはfree版を使う場合はFont Awesome 5 Freeで大丈夫です。
contentに入れるのがunicodeというアイコンを指定する番号みたいなものですね。正確にいうとunicode=アイコン指定番号ではないですが、今回は深入りしません。

ここで注意したいのが¥もしくは\をunicodeの頭につけてあげることです。
公式サイトからコピペした段階では最初からついていないので、つけ忘れに気をつけましょう。

FontAwesomeでアイコンが表示されない時のチェックリスト

さて、ここからはちゃんと手順通りFontAwesomeを導入したはずなのになぜかアイコンが表示されない方、ハマってしまった方のためにチェックすべき項目を7つ挙げていきます。

font-weightを確認する

特定のアイコンは、font-weightboldあるいは900でないとうまく表示されない仕様になっています。
とりあえずfont-weightプロパティを設定してみましょう。

最新バージョンを使っているか確認する

そのFontAwesomeへのパス、ちゃんと最新版になっていますか?
FontAwesomeはわりとアップデートが頻繁に起こるので、適宜公式ページをみて最新のパスになっているか確認しましょう。

head内にリンクを貼れているか確認する

CDNを使う際のlinkタグはhead要素内に書かれていますか?間違えてbodyheader内に入ってたなんてことも起こりうるので確認してみましょう。

font-familyが合っているか確認する

基本的にはみなさんお金を払いたくないはずなのでFree版を使っていると思います。
CSSで使用する際にちゃんとfont-familyFont Awesome 5 Freeになっていますか?
Font Awesomeではダメなので気をつけましょう。

使いたいアイコンのunicodeが合っているか確認する

unicodeは合っていますか?また、unicodeの前に¥もしくは\をちゃんとつけていますか?
ちなみにunicodeは下の画像のようにアイコンページから確認できます。

自分が使っているアイコンがpro版なのかfree版なのか確認する

Free版を使っているあなた、その使おうとしているアイコンは本当にFree版ですか?Pro版を使おうとはしていませんか?
ちなみに私がハマった原因はここでした。自分の使おうとしているアイコンがPro版かFree版かは、アイコンページを見ればわかります。Pro版にはちゃんとマークがついているのでお見逃しなく。

キャッシュが残っていないか確認する

フロントエンドの改修ではありがちなのですが、単にキャッシュが残っていて更新が反映されていないだけの可能性もあります。
command+Shift+Rでスーパーリロードを行い、キャッシュを消しましょう。

正しい使い方でFontAwesomeを活用し、彩り豊かなサイトを作りましょう!!

コメント

タイトルとURLをコピーしました