Font Awesomeが表示しない、または一部の場合の対処方法

以前は正しく表示していたFont Awesome! 最近表示できなくなったのはなぜ?

Awesomeフォント表示しない

バージョン5にしたら表示できなくなった場合の対応は?

現象

Font Awesomeは頻盛にバージョンアップしています。最近バージョン5にアップデートしたら,

今まで表示していたフォントが表示しない現象が発生した。

awesome fontが表示しない例

分類

wordpressトラブルシューティング

バージョン等

  • wordpress 4.9.8
  • Font Awesome バージョン5

対処方法

まずは、症状の切り分けをしてください。

  1. 全然表示しない
  2. iタグでは表示するが、:before疑似要素では表示しない
  3. 同じ書き方でも表示する場合、しない場合がある

ケース1

headに記述するlinkメタが間違っている可能性があります。もう一度、Font Awesome公式ページのHow to useをご覧になってlinkタグを貼り直してください。その際、右肩にあるバージョンの確認もしてください。

公式ページよりlinkメタタグを再コピー

 

ケース2

font-familyの指定が違っている可能性があります。バージョン5ではフォントファミリーネームが代わりました。font-family:font awesome Free 5″のようなバージョン番号とfreeという種別がを含むようになりました。また、指定しているクラスが代わりました。たとえばfaというクラスがfasになっているというようなの違いです。こちらも公式ページからiタグを再コピーしてください。

 

個別フォントアイコンのページを表示

指定のクラスが替わった事により、:beforeや:after疑似要素に直接ユニコードで記載している場合は、font-weightの指定も必要になります。

新クラス アイコンの種類 指定するウェイト
fas Solid font-weight:900
far Reqular font-weight:400;
fab Brand font-weight:400;
fal Light font-weight:300;

以上のチェックでもなおらない場合は、

  • 本当にそのアイコンが使えるのか(バージョン5ではプロ用のアイコンがくわわりました)。

ケース3

最後のケースでは、前述したプロ用のアイコンを使っていないかのチェックをしましたが、過去に表示していたアイコンということですから当てはまらないかも知れませんが、そのアイコンが適用するバージョンを確認してください。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク
ページ上部へ戻る