いやぁーーー！
おいおい！なんだよまた突然発狂して！？
なんどやってもCSSで指定したFont Awesomeが□（四角）になっちゃう！！しかもPCではちゃんと表示されているのに、iPhoneでうまく表示されない・・・
そうそう、普通にiタグを使ってhtml上に入れるのにはちゃんと表示されるのに、CSSで指定すると□（TOFU）になっちゃうあれ。
目次
なぜだか一部のアイコンは表示されるのに・・・
基本的な事は他の有名サイトさんを参考にしてもらうとして、
まず一般的なFont Awesomeの利用の仕方として、headの前に、
Ver.5のCDNをいれて読み込み。
CSSにお決まりのliタグの前にbeforeでFont Awesomeを利用する。
ちなみにHTMLは上記です。
上記が表示された例。で、ここで一つ。
.menuDot1のアイコン、f587は□になってしまうのだが、アイコンf192は上記のCSSでちゃんと表示されている・・・そもそもこの表示されたりしなかったり、というのが混乱の元なんだな。
なぜだかわからないのだけれど、おそらく昔からあるアイコンは上記のCSSで表示されるが、最近できたような新しいアイコンはダメみたい。。。
font-familyを変更する時に忘れてはいけない「” “」
一番有名な修正方法として、font-familyを「FontAwesome」から「”Font Awesome 5 Free”」にに変更する。
すると上記のように正常通りに表示された。
で、見落としがちな例として説明すると、
今回これfont-familyを「FontAwesome」から「”Font Awesome 5 Free”」に変更したわけだが、「” “」ダブルコーテーションで囲わないとちゃんと機能しない。
なんだそれが一番の原因だったのか（笑）どう考えても同じようにやっていると思ったのにね。
CDNの情報がFont Awesomeのサイトから消えていた
font-familyを「FontAwesome」から「”Font Awesome 5 Free”」を回避できるっていうのが巷で有名だが、なんか久々にFont Awesomeのサイトを見ていたら、
今までCDN情報やcss等の導入の方法を公開していたのに、Ver.6が発表されてからなのか登録制になってしまったようだ。
まぁいいでないか、早速登録してみよう。
登録すると専用のjsが用意された。これをheadの前に入れて読みに行く。
上記のままのCSSで、
問題なく表示された。
実はfont-family: FontAwesome;のままでもちゃんと表示されるようになっていた・・・
ちょっと試しに、上記の登録して利用できるjsの状態のまま以前のCSS「font-family: FontAwesome;」に戻してみる。
なんということでしょう～！普通に表示された！
えーー！ホントだ！こっちの方がバージョンに縛られないで管理ができそうだね。
ただSolidなっちゃってるね・・・
で、これをRegular表示にするために、font-weight:400;と入れてもRegular表示にならなかった・・・
なので、結局Regular表示にするためには、font-family: “Font Awesome 5 Free”;、font-weight:400;とするしかなかったよ。。。なぁーんだ。
うーん、一歩前進したような、まったくしていないような・・・
まとめ
- font-family:FontAwesome;のままでもFont Awesomeに登録してもらえるjsを読み込めば□にならない
- だがどうやらSolid表示しか利用できない（RegularにProと表示されていなくても）
- 登録してもらえるjsを利用してRegular表示にするにはfont-family: “Font Awesome 5 Free”;、font-weight:400;と指定しないとRegular表示にはならない。
いかがでしたでしょうか？
Solid、Regularにこだわらないのであれば、js読み込んで表示するのもいいかもね！今後もバージョンアップが予想されるし、いつまでも“Font Awesome 5 Free”で指定ってちょっとねw
