【はてなブログ-カスタマイズ】サイドバーのアイコンを変更してみる（Font Awesome）

数日前から適用していますが、サイドバーのアイコンを変更してみました。
今回の変更は、2日前のグローバルナビゲーションのアイコン変更と同じような感じです。

miya-moto-memo.hatenablog.com

せっかくFont Awesomeのアイコンが使えるので、サイドバーのアイコンも変更してみようと思った次第です。

それではサクッと本題へ。

変更内容（画像）
参考サイト
適用したCSS
デザインの適用手順
注意事項
おわりに
関連記事

変更内容（画像）

まずは変更前後の画像を載せます。

サイドバーの項目は10個くらいあるのですが、その中からピックアップして何個か載せます。

左が変更前、右が変更後です。

プロフィール

月別アーカイブ

参考サイト

web-manabu.com

こちらのサイトにFont Awesomeの対象バージョンのアイコン一覧が載っていました。
こちらを見ながらそれっぽいアイコンを探しました（前回の記事と同様）。

大変参考になりました。ありがとうございます。

適用したCSS

/***サイドバー：アイコン***/
/*全体*/
.hatena-module-title:before {
    position: static;
    border: none;
}
/*プロフィール*/
.hatena-module-profile .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f2c0";
}
/*固定ページ*/
.hatena-module-links .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f0c1";
}
/*検索*/
.hatena-module-search-box .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f002";
}
/*カテゴリ*/
.hatena-module-category .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f114";
}
/*注目記事*/
.hatena-module-entries-access-ranking .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f006";
}
/*最新記事*/
.hatena-module-recent-entries .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f017";
}
/*関連記事*/
.hatena-module-related-entries .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f00c";
}
/*月別アーカイブ*/
.hatena-module-archive .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f133";
}
/*HTML*/
.hatena-module-html .hatena-module-title:before {
    font-family: FontAwesome;
    content: "\f0eb  ";
}
/***サイドバー：アイコンここまで***/