Font Awesomeを使おうとしてたまに陥るこの問題。時間がないときに限ってハマるし( ﾟДﾟ)てなるのですが、落ち着いて確認すべきポイントをまとめます。
CSSの読み込み
サーバに置いたcssを読む場合、パスが間違っていないか確認してください。
1 | <link rel='stylesheet' href='/css/font-awesome.min.css' type='text/css' media='all' /> |
HTMLでの記載
Font Awesome5の場合faプレフィックスに代わり、種類ごとのプレフィックスfas,far,fal,fabになりましたが、
それ以前のバージョンの場合は使えないので、「fa」にすることでなおることがあります。
1 | <i class="fa fa-facebook"></i> |
CSS記載の確認
Font Awesome5の場合「font-family: “Font Awesome 5″」の指定になりますが、それ以前の場合は「FontAwesome」にしてください。
1 2 3 | .fa { font-family: FontAwesome; } |
ファイル文字コードの確認
font-awesome.min.cssを使い回したりしている場合、コピー等によってファイルの文字コードが変わっている事があるかもしれません。テキストエディタで文字コードの確認をしたり、ターミナルの場合はnkfコマンドで確認します。
utf-8にすることで表示がなおるかもしれません。
1 | $ nkf -g font-awesome.min.css |
fontディレクトリが設置されているか確認
サーバにcssを設置していて、上記すべての作業をおこなっても表示されない場合、「fonts」そのものをサーバに設置していない可能性があります。(使い回している場合などは要注意です！)
Fontawsomeをダウンロードした際にcssと一緒に入っているfontsディレクトリをcssフォルダと同じ階層に設置してください。
