![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY6TY1a_Xi4hftp3y9SUVq46x8YoN3igJCFu3s6YtSIUUBge5O9Y7CgNBBtIXGS0SsAvk62t7AoSivVRFP_MCVLm6mmBK7H-bDWPyp7rwKkGumMviM03DqBvVhQt_JcnpRlo1dgh4Eh9o/s640/6480C0F0-83BF-4F3E-BD5B-FA48481DE0E5-2624-00000253ED7AC5C1.png)
おしゃれでスタイリッシュなWebアイコンフォントとして人気の高い「Font Awesome」。
Vaster2テンプレートでは、SNSボタンに使用されています。
FontAwesomeの最新バージョン「v5.0.6」が出たということでさっそく導入してみたのですが、アイコンが表示されなくなってしまいました。
![【Blogger】Vaster2にWebアイコンフォント「Font Awesome 5」を導入したらSNSボタンが表示されなくなった](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMDjDOJwwoXUC9u5pGkVPXh3bGP8Kk99FMjYmiClTXyekKK5rNyt_Q8HTORnT7P8682leK7iEDIKVp66fUXyamKPJ_XyiBoY104ZYVz67L1uojxn5J1I0pgEIWeu8k4KWzM7Nz4nQ_tUI/s400/1.png)
解決方法をメモしておきます。
【無料】アフィリエイトフレンズ会員登録
テンプレートの変更箇所
もともと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>そうすると、アイコンのあった部分に「?」が表示されるようになりました。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqLw10DZIZO25hc34xzidYh28078vImGyZZgkxLx1odmGqL0NxZzWJBzidhsu3VbNQ5_262BCo4T-VZ_FegEv6iBkBgBbb9ftLl7eRR1IPD-kt5fzra3Jrj3AkT5_QwqvSgPwEVZZs5l0/s400/2.png)
次は各<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>これでアイコンが正常に表示されるようになりました。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPtp1RkPeUKaDv-bOMeIoh64NM6wgWJd-VZ4F7x2T6mWN6H3o2wxc-4zNC4seXiQDdHQxJeZdiTAvS2PEwqwAaMhUfvexxpZiAQ6Kk7zYMfltG0IuVk-tsAKPazsg51aJNx7UBR_naKaw/s400/3.png)
ちなみにアイコンの種類とプレフィックスの対応は以下のようになっているみたいです。
種類 | 意味 | プレフィックス |
SOLID | 塗りつぶし | fas |
REGULAR | 標準 | far |
LIGHT | 細い線 | fal |
BRANDS | ブランドロゴ | fab |
まとめ
この後、個別記事内で使用しているアイコンの<i>タグを、全て一つずつ修正しなければいけないことに気づいて愕然としました。最新バージョンでは使用できるアイコンの数が増えていたり、いろいろな機能も追加されています。面倒ですが変更する価値はあります。
アイコンを使うとブログが一気に華やかになって、記事を書くのも楽しいですよね。
同じような現象に悩んでいる人は、ぜひ参考にしてみてください。
以上
0 件のコメント :
コメントを投稿