Font Awesome 5は今までのFont AwesomeとはちょっとCSSの記述を替えないといけないということを知らずにそのまま使うと、設定したアイコンが□で表示されます。
なんでやねん！！と思ったらちゃんとルールがありましたのでまとめておきます。
Font Awesome 5は記述が3点セット
Font Awesome 5を使う場合、font-familyの指定、contentの指定、font-weightの指定、この3点が揃わないと□表示されるのです。
font-family: "Font Awesome 5 Free";
content: '\f35a';
font-weight: 800;font-familyの注意点
4までは「Font Awesome」だけで指定していたのですが、これをFreeで使う場合は「Font Awesome 5 Free」まで記載しないといけません。（有料版を使う場合はFont Awesome 5 XXXX←使うver.を入力）
contentの注意点
contentは今まで通りの記載でOKですが、よくバックスラッシュを忘れてしまいがち。
font-weight
4まではこの指定が不要だったのですが、これが抜けていると5ではアイコンが□になります。
font-weightの指定は数字でならほぼ表示されます。boldは表示されるけれども、normalでは表示されないので、基本は数字で設定するのがよろしいかと。
Cocoonを使っている場合
Font Awesomeのバージョンを4→5に替えたときによくおこる現象です。その場合、CSSを3点セット表記に変更しましょう。面倒であれば4のまま使うのがいいのでは？
5の方がアイコンも増えたので使い勝手もいいですが、注意も必要になってくるので□表示になった場合は3点セット表記をまず見直してみましょう。
（他サイトで紹介されているカスタマイズのコピペをするときも、ver.4での紹介も多いのでその時は自分で3点セットに書き換えましょう）
コメント