fontawesomeが表示されず◻︎(四角)になってしまう場合の対応方法

今回の記事では、fontawesomeという超便利なWebアイコンツールを使おうと読み込んだものの、
うまく表示されない場合の解決パターンをご紹介します。

バージョンの確認

まずバージョンの確認をしましょう。
CDNを使用している場合は、リンク内にバージョンが書いてるのでそこを確認して下さい。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

この場合は「v5.8.2」です。
2019年5月時点では、このバージョンが最新になります。

旧バージョンは4から始まるバージョンです。

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

「4.7.0」と書いています。

このバージョンの違いで、使用できるアイコンの種類と、cssでの指定方法が変わってきます。

使用できるアイコンの確認

バージョンごとの使用できるアイコンの確認する方法のご紹介です。
まず、普通にfontawesomeのページより検索した結果が、新バージョンで使えるアイコンです。

トップページ下の部分の↓赤枠で囲まれているところから飛んだ先が旧バージョンで使えるアイコン一覧です。

CSS指定の確認

CSSで指定する場合、content: "\f105";という感じで記述してあげます。
さらにfont-familyも指定する必要があるんですが、これがバージョンによって違います。

新バージョン

li::before {
  font-family: "Font Awesome 5 Free"; 
  content: "\f105";
}

旧バージョン

li::before {
  font-family: FontAwesome;
  content: "\f105";
}

Freeのアイコンか

PROと書いてあるアイコンは有料版しか使えないので、注意しましょう。

その他

他にも、font-weight の値を変えてみると表示されたりします。
この記事に書いてある方法で表示できるようになれば幸いです！