font awesomeで文字化けされ表示されない時の対策

  • このエントリーをはてなブックマークに追加

font awesomeで文字化けされ表示されない時の対策

おしゃれなアイコンを手軽にブログなどに導入できるfont awesomeですが、font awesome 5 freeになってからはアイコンが文字化けされたり、きちんと表示されなくなったりするようです。

というわけで今回はそんなfont awesome 5 freeがちゃんと表示されない原因とその対策についてご紹介していきたいと思います。

font awesome 5 freeで文字化けされ表示されない場合の対策

疑似要素(「:before」や「:after」)を使ったcssでの記述の際に、font awesome 5で指定のアイコンが文字化けされきちんと表示されないのは、主に下記のような原因が挙げられます。

  • 「font-family」の指定が最新ではない
  • 特定のアイコンはfont-familyの指定が変わる
  • contentで指定するユニコードの前に「¥」または「\」を付けていない
  • 「font-weight」を指定していない
  • CDNが最新のものではい
  • CDNの貼り付け場所がheadタグ内ではない

「font-family」の指定が最新ではないまたは適切ではない

font awesomeは現在font awesome 5であり、「font-family」の指定がfont awesome 4以前であれば、当然きちんと表示されません。

例外もありますが、基本的に「font-family: “Font Awesome 5 Free“;」とする必要があります。

特定のアイコンはfont-familyの指定が変わる

スカイプアイコンやアマゾンアイコンなどブランドのアイコンは「font-family」を指定する際に

ではなく

というように「Font Awesome 5 Brands」と記述する必要があります。
なのでブランドのアイコンが上手く表示されない場合は、まずこの原因を疑うと良いでしょう。

contentで指定するユニコードの前に「¥」を付けていない

contentプロパティでユニコードを記述する際は、そのユニコードの前に「¥」(またはバックスラッシュ)を付けなければなりません。

「font-weight」を指定していない

Font Awesome 5になってからは、「font-weight」を指定しなければ上手く表示されないアイコンが出てきたので、アイコンが□とかになっている場合はfont-weightを指定すると多々解決するようです。

ちなみにこのfont-weightの指定の仕方も、そのアイコンの種類によって変わってきます。

種類 font-weightの値 内容
SOLID(fas) 900 通常のアイコン
REGULAR(far) 400 アウトラインをとったようなアイコン
LIGHT(fal) 300 線が細いアイコン
BRANDS(fab) 400 フェイスブックなどブランドのロゴアイコン

fontawesomeの使い方 アイコンの種類の探し方アイコンの種類に関しては画面右横のところで確認することができます。

アイコン「angle-right」の場合は、「SOLID」なのでfont-weightの値は「900」で指定することになります。

CDNが最新のものではい

headタグ内に貼り付けたCDNが最新のものでない場合は、上手く表示されません。

最新のもコードをコピーして貼り付ける場合は、font awesome公式サイト(https://fontawesome.com/start)のトップページから行うことができます。

CDNの貼り付け場所がheadタグ内ではない

CDNのコードの貼り付け場所がheadタグでない場合も不具合の原因となります。

なのでheadタグ内にCDNを貼り付けるようにしましょう。

まとめ

font awesome 5 freeになってからはfont-weightを指定しなかったりすると、従来とは違ってアイコンが文字化けされたり、きちんと表示されなくなったりすることがあります。

なのでfont awesome 5 freeでアイコンが表示されない場合は、上記のような対策を試してみてはいかがでしょうか?

SNSでもご購読できます。

コメントを残す

*