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

ウェブサイトでアイコンを使う時、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-weightで無料対応しているフォントだったからたまたま出ていただけでした。
そんなん、前無かったやん(T_T)
サイトにきっと書いてるんだろうけど、英語読めへんやん(T_T)

対処法

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

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

font-weightの指定は、以下。

さいごに

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

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