Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

今回の記事では、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のページより検索した結果が、新バージョンで使えるアイコンです。

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

Font_Awesome.png

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と書いてあるアイコンは有料版しか使えないので、注意しましょう。

acorn___Font_Awesome.png

その他

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

szaizen
3年目Webエンジニアです✏️ フロント強いウーマンになりたい
liginc
上野でウェブ制作を行うクリエイティブ集団です。HP制作、プロモーション、システム開発等を行っています。
https://liginc.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away