コスメ水槽waterTank

30代・乾燥肌の管理人の年齢肌対策。スキンケアコスメの紹介と、時々メイク。綺麗なおばさん目指します。

[Stinger5]Pocketのアイコンが表示できないよ! という時はFont Awesomeのバージョンを見直そう

 

sns share button

Stinger5のカスタマイズで無駄にハマりかけたので、似たとこで詰まってる人のために。。。

先日、sns系のボタンを最近流行ってる(?)html+cssのフラットボタンに変更しました。アイコンはFont Awesomeを使用。

Stinger5は最初からFont Awesomeのライブラリにリンクしてあるので、自分でアイコン追加したい時にはすぐに使えます。

ところが、Twitter、Facebook、Google+のアイコンはすぐに読込めたのにPocket(fa-get-pocket)だけ表示できない……。何回画面を再表示してもPocketのアイコンが出ない。さんざんソースを見直したけど、閉じかっこがおかしいとか綴りが違うとかそういうのもなく、正しそうに見える。

なんなのさ! と若干キレ気味にFont Awesomeのサイトを眺めていたところ、"66 New Icons in 4.4"にget-pocketが含まれていることに気付きました。(ノ∀`)てへ。
比較的新しく追加されたアイコンだったのですね。

このブログではFont Awesome Ver4.0.3へリンクしていたので、Ver4.4へ上げてやらないといけないのでした。

修正するソースファイル

ここで使用しているStinger5はVer20150505です。

  • header.php

<link>タグのリンク先を修正 - header.php

修正前

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

修正後

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

参考にしたサイト

Font Awesome, the iconic font and CSS toolkit

 - ブログひっこし ,