Wedges.bin

はてなブログでWEBデザイン

サイドバーにアイコン追加する方法

シンプルさを目指して、サイドバーに目が行くようなものを置かないデザインなのですが、サイドバーも見て欲しい!という方に。


もともとこのテーマでは「Font Awesome」を読み込んでいますので、以下のCSSを追加すると、サイドバーの各項目にアイコンを追加できます。

追加した感じは、こちらのブログで確認できます。savoia.hatenablog.jp


追加されるアイコンは、プロフィール、検索、リンク、最新記事、アーカイブ、注目記事、カテゴリー、最新コメント、参加グループです。
f:id:wedges:20150930125325j:plain

上記のアイコンとは、別もものが表示されますが・・・。
詳しくは、こちらで確認してください。
「f000」の部分を変更すると、他のアイコンにも変更できます。

.hatena-module-title:before {
font-family: FontAwesome;
font-size: 1.5em;
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.hatena-module-profile .hatena-module-title:before {
content: "\f007";
}
.hatena-module-search-box .hatena-module-title:before {
content:'\f002'
}
.hatena-module-links .hatena-module-title:before {
content:'\f0c1'
}
.hatena-module-recent-entries .hatena-module-title:before {
content:'\f005'
}
.hatena-module-archive .hatena-module-title:before {
content:'\f187'
}
.hatena-module-entries-access-ranking .hatena-module-title:before {
content:'\f091'
}
.hatena-module-category .hatena-module-title:before {
content:'\f02c'
}
.hatena-module-recent-comments .hatena-module-title:before {
content:'\f086'
}
.hatena-module-circles .hatena-module-title:before {
content:'\f0c0'
}