はてなブログの古いテーマでアイコンが表示されなくなったときの対策(FontAwesomeが原因の場合)

このブログも結構放置してしまっていますが、久しぶりに見たら一部のアイコンや画像が表示されなくなってました。

↓右側の日付のところや、左側のプロフィールのところのアイコンが表示エラーになっています

↓正しい表示はこんな感じです

原因

表示されていないアイコンは、このブログで使用しているはてなブログのテーマ(Gravity)が使っているものです。ソースコードを調べてみるとFontAwesomeを使ってアイコンを表示しているようです。

テーマのcssからFontAwesomeのcssをimportしているようなのですが↓

@import "http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css";

httpsではなくhttpになっているのが怪しい気がします。最近はhttpsが当たり前になって来てますからね。

本当にhttpが原因なのかはわかりませんが、とにかくFontAwesomeが正しく機能していないのが原因のようです。

いろいろ試してみた結果、FontAwesomeのCSSの読み込みを別途指定することでアイコンが表示されるようになりました。

以下のコードを「はてなブログの設定->詳細設定->headに要素を追加」に追加します。

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

↓こんな感じ