きになるnet - きになるものを綴ったブログ

iPhone・MacからWordPressなどのWebに関することまで、きになるものを綴ったブログ

Tips

アイコンWebフォント「Font Awesome」の一部が表示されなくなった時に確認したいこと!

投稿日:2015.11.25 更新日:

この度、Wordpressのテーマを「Stinger 3」より、自作テーマに変更した際に、以前より利用していたアイコンWebフォント「Font Awesome」の一部が表示されなくなりました。

そんな際に確認したいことです。

※「Font Awesome」の利用方法としては、アイコンをダウンロードする方法ではなく、CDNを利用した方法で利用の場合です。

Font Awesome

icon font-1Quotation : Font Awesome

WEBフォントにテキストではなく、アイコンを表示させたもので、よくWebサイトのデザインで利用されている方が多いかと思います。

その中でも「Font Awesome」は利用されている方がかなり多い、アイコンWebフォントになります。

最大のメリットとしては、通常のフォントと同じように扱える(CSSで色を変えたりできます)ところです!

表示されなくなった時に確認したいところ

Font Awesome-big

このサイトのナビゲーションバー、カテゴリー名の前にアイコンWebフォントを利用しているのですが、「Mac」や「Apps」の前には表示がされているのに、「News」や「Wordpress」の前には表示されていません。

メニューには

<i class="fa fa-fw fa-newspaper-o"></i> News
<i class="fa fa-fw fa-wordpress-o"></i> WordPress

とコードを打っており、他のカテゴリーに関しては表示されているのですが、「News」や「Wordpress」のみが表示されない状況です。

もしやと思い、Wordpressのテーマのheaderを確認したところ

icon font ver

以前から使用しているバージョンは4.0.3で、「Font Awesome」で確認してみると、既にバージョンは4.5.0になっていました。(2015年11月25日現在)

icon font ver-1Quotation : Font Awesome

バージョンを訂正したところ、すぐに表示されました。

icon font-big

まとめ

CDNを利用した方法で、アイコンWebフォントを利用している際に、一部のアイコンが表示されない場合は、コードを確認して間違いがないようでしたら、「Font Awesome」のバージョンが変わっている可能性が高いですので、一度確認して下さい。

mixhost
当ブログは、MixHostで運営中です!
おすすめ記事

-Tips
-

Copyright© きになるnet - きになるものを綴ったブログ , 2018 All Rights Reserved.