Font Awesomeで特定のアイコンだけ表示されない時の確認方法

Tips

ウェブサイトでアイコンを使う時、Font Awesomeを利用されている方がかなり多いと思います。
僕も多用するのですが、最近Font Awesomeがアップデートされていて有料版なるものも出てきました(前からあったのかな?)。

で、この前久しぶりに使ってみたら、特定のアイコンだけが出ない!という状況にドはまりし1時間くらいこの対応に費やしてしまいました・・・(T_T)
解決したらなんてことのない事が原因だったのですが、僕のように無駄な時間を使う人が出てこないように、また忘れやすい未来の自分宛に、同じ事できっとハマるだろうから備忘録として対処法を。

 

 

特定のアイコンが出ない現象

現象としては、こんな感じです。

See the Pen Font Awesome by takio (@webmemo) on CodePen.

同じチェックのアイコンなのに、四角の枠があるアイコンは表示できて、チェックのみのアイコンが表示できない。
バージョンが違うのか!?と思ったけど、バージョンも同じ。Font Awesome以外のCSS外してみたり別ページでやってみたりとにかく色々試すも、何故か出ない・・・
このアイコンの他にも、表示できないものがいくつかあって、なんで!?!?有料ともなっていないのに!?!?全然ワカラン!となったのでした。

 

 

表示できない原因

で、もう色々調べまくってようやく原因がわかったのですが、どうも今のFont Awesomeは「font-weightの設定がある」ようです。
そして、アイコンによってはこの太さは無料、この太さは有料、といったように無料で使えるfont-weightの設定が限られています

 

Font Awesomeの設定画面
Font Awesome画面キャプチャ

 

表示できていたのは、デフォルトのfont-weightで無料対応しているフォントだったからたまたま出ていただけでした。
そんなん、前無かったやん(T_T)
サイトにきっと書いてるんだろうけど、英語読めへんやん(T_T)

 

 

対処法

今回の例の場合だと、「font-weight:900;」を足すだけで無事表示できました。

See the Pen vVKpwW by takio (@webmemo) on CodePen.


font-weightの指定は、以下。

種類 font-weight
SOLID 900
REGULAR 400(デフォルト)
LIGHT 300

 

さいごに

なんでもやっぱり最先端は海外で、いつも英語が読めなくて困ります(T_T)
逆に、英語ができたらこういった問題もすぐに解決できたり、新たな技術の情報も結構リアルタイムに読めたりするので、大きなアドバンテージですもんね。

何年も前から英語は習得しようぜ的な風習になっていたのに、目を瞑ってきた結果がコレです。
何かを始めるのに遅すぎるという事は無いと、どっかの偉い人が言ってたような気がするので、これから英語を勉強しようと思います。

The following two tabs change content below.

たきお

うぇぶめも。運営者のたきおです。 ジョギング・草野球が趣味のクセにぽっちゃり体型。 自分の備忘録も兼ねて、ウェブ系のちょっとした情報などを発信しております。 気に入ってもらえればTwitter・Facebookなどでもフォローして頂けると励みになりますm(__)m

フォローはこちら

Tips

Posted by たきお