シロクマは冬眠したい

デザインのこと、買ったもののレビューとか書きます

【はてなブログ】Facebookアイコンが消える問題を解決する

f:id:hatarakitakunaingo:20170119195532j:image

前回の記事を公開した時に気づいたのですが、カスタマイズ済みシェアボタンの様子がおかしいのです。どうやらはてなブログで使用しているFacebookのwebアイコンが消えてしまっているようです。(はてなブログを使っていない人やシェアボタンをカスタマイズしていない人は関係ありません)

簡単に解決できたので方法を書いてきます。

FontAwesomeを読み込んでいる場合

シェアボタンをカスタマイズしている場合は、ほとんどの人はFontAwesomeを読み込んでいるはずです。

シェアボタンのコードの中から、

    blogicon-facebook lg

 という記述を探します。見つけにくい場合はメモ帳などに貼り付けて「ctrl(command) + F」で検索してください。

見つけたらそれを

    fa fa-facebook-official

 

に変更して保存します。

これで正常に表示されているはずです。

f:id:hatarakitakunaingo:20170119195558j:image

FontAwesomeを読み込んでいない場合

シェアボタンをカスタマイズしていてFontAwesomeを読み込んでいないってことはないと思います。ですが万が一、上の手順でアイコンが表示されない場合はFontAwesomeが読み込まれていない場合があります。

その場合は、head内に

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

を追加します。

そのあと、上の「FontAwesomeを読み込んでいる場合」と同じ手順を行います。

原因

原因はよくわかりませんが、はてなが独自に使用しているアイコンをまとめた記事(はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ - しろかい!)を拝見したところ、Facebookアイコンの他にカレンダーアイコンも消えているようです。

多分はてな側で何か問題が起きているか、変更を行ったのではないでしょうか。

もしカレンダーのアイコンが消えてしまって困っている方はFontAwesome(http://fontawesome.io/)のアイコンと置き換えておいた方がいいかもしれません。

fontawesome.io