Blogger

【Blogger】SNSボタンのアイコンが消えた！Vaster2にWebアイコンフォント「Font Awesome 5」を導入する際の注意点

おしゃれでスタイリッシュなWebアイコンフォントとして人気の高い「Font Awesome」。

Vaster2テンプレートでは、SNSボタンに使用されています。

FontAwesomeの最新バージョン「v5.0.6」が出たということでさっそく導入してみたのですが、アイコンが表示されなくなってしまいました。

解決方法をメモしておきます。

【無料】アフィリエイトフレンズ会員登録

テンプレートの変更箇所

もともとVaster2に導入されていた「Font Awesome」のリンクを、以下のように変更しました。

【変更前】
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
↓
【変更後】
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

この変更後、SNSアイコンが表示されなくなってしまったのです。

アイコンが表示されない場合の解決方法

私が行った修正は以下の通りです。

WebフォントではなくSVG画像形式で表示する

バージョン5からはSVG+Javascriptでアイコン表示させる方法が推奨されているそうです。
SVG+Javascriptの場合でも、アイコンの使い方はCSSと同じです。

ということで、CDNリンクを修正しました↓

【変更前】
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
↓
【変更後】
<script defer='defer' src='https://use.fontawesome.com/releases/v5.0.6/js/all.js'></script>

そうすると、アイコンのあった部分に「？」が表示されるようになりました。

次は各<i>タグの接頭語（プレフィックス）修正していきます。

v5.0.6では<i>タグ内のプレフィックスが変更されている

<i>タグのclass名が、バージョン4では「fa」でしたが、バージョン5から「fab」「fas」「far」「fal」の4種類に変更されています。

以下の通り、SNSシェアボタンのプレフィックスを修正する必要があります。

Twitter
【変更前】
<i class='fa fa-twitter'></i>
↓
【変更後】
<i class='fab fa-twitter'></i>

Facebook
【変更前】
<i class='fa fa-facebook'></i>
↓
【変更後】
<i class='fab fa-facebook-f'></i>

Google+
【変更前】
<i class='fa fa-google-plus'></i>
修正後
<i class='fab fa-google-plus-g'></i>

はてブ
【変更前】
<i class='fa'>B!<></i>
↓
【変更後】
<i class='fal'>B!<></i>

Pocket
【変更前】
<i class='fa fa-get-pocket'></i>
↓
【変更後】
<i class='fab fa-get-pocket'></i>

これでアイコンが正常に表示されるようになりました。

ちなみにアイコンの種類とプレフィックスの対応は以下のようになっているみたいです。

種類	意味	プレフィックス
SOLID	塗りつぶし	fas
REGULAR	標準	far
LIGHT	細い線	fal
BRANDS	ブランドロゴ	fab

まとめ

この後、個別記事内で使用しているアイコンの<i>タグを、全て一つずつ修正しなければいけないことに気づいて愕然としました。

最新バージョンでは使用できるアイコンの数が増えていたり、いろいろな機能も追加されています。面倒ですが変更する価値はあります。

アイコンを使うとブログが一気に華やかになって、記事を書くのも楽しいですよね。
同じような現象に悩んでいる人は、ぜひ参考にしてみてください。

以上

<スポンサーリンク>