Stinger5でWebアイコンフォント「Font awasome」が表示されないときの対処法

Tips

Stinger5で使用しているWebアイコンフォント「Font awasome」。カスタマイズで別のアイコンを使用してみたけど、表示されなかったことがありました。対処法がわかったので、備忘録。

Stinger5のバージョンが ver20151005 時点でのお話です。バージョン異なると解消されているかもしれません。あくまでも確認する箇所のひとつとしてお読みください。

Stinger5の「Font awasome」

WebアイコンフォントはスタイルをCSSで指定できるところが最大のメリットです。拡大・縮小はお手の物、モバイルとPCの画面を1つのhtmlで行うレスポンシブデザインをするときなどにはすごく重宝します。
読み込むデータが多くなってしまうデメリットはありますが、モバイルでも通信速度が速くなってきていますし、なにより「Stinger5」のテーマ内に入ってあるなら、ほかの箇所でも使用したいですよね。

どうやって表示しているの?

Stinger5では、Webアイコンフォントの「Font awasome」を使用しています。

header.phpのlink要素 BootstrapCDNを使って「Font awasome」を呼び出していますね。ver20151005 時点、コードはこのようになっています。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

表示するときはこのように記述します。たとえば、カメラアイコンだと、

<i class="fa fa-camera"></i>

表示結果はこのようになります。カメラアイコンに変わっていますね!

 

上の「Font awasome」でアイコンをクリックすると記述方法が書かれています。表示させたい箇所に記述すれば、OK。ただ、このままだと一部のアイコンが表示されないことが……。なんでだー?

「Font awasome」で参考になったサイト

ちょっと寄り道。「Font awasome」のさまざまな表示方法や利用方法はこの記事がとても詳しくわかりやすかったです。私も参考にさせていただきました。ハムさん( @h2ham )、ありがとうございます。

楽して便利!Webアイコンフォント『Font Awesome』の使い方と活用 Tips - HAM MEDIA MEMO
このブログでも何度か細々登場してきたアイコンWebフォントのFontAwesome。使い方の基本を知っていることで、利用できる幅がかなり広がるので、今日はその使い方のと活用のためのTipsを幾つか書いておきます。FontAwesome,theiconicfontdesignedforBootstrap※なお、本エントリ...

「Font awasome」サイトを確認

もういちどご本家のサイトを確認してみましょう。

20151112-01

むむっ、最新版じゃないぞ!

どうやらバージョンが異なることで最近追加されたアイコンが表示されなかったようですね。かんたんにバージョンアップができるので、やっていきましょう!

「Font awasome」のバージョン変更する

「Font awasome」のサイト内、Get Startedページでの使用方法が書かれています。

以下の書かれているタイトル手順1.のソースをコピーしてきます。
EASIEST: BootstrapCDN by MaxCDN

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

そして、先ほど確認したheader.phpの1行を丸ごと置換します。

これで、最新バージョンの「Font awasome」が使用できるようになりました。WordPressのテーマ編集を更新して、アイコンが表示されるか確認してみてください。

まとめ

以上、Stinger5でWebアイコンフォント「Font awasome」が表示されないときの対処法でした。正しく指定しているはずなのに表示できないという方、ぜひ一度head要素を確認してみてくださいね!

ちょっとお遊び

以下のリンクにあるアニメーションを拝借して「Font awasome」を降らせてみました。

See the Pen Drop Icon by simo2 (@lets-try-simo2) on CodePen.0