サイドバーにアイコン追加する方法
シンプルさを目指して、サイドバーに目が行くようなものを置かないデザインなのですが、サイドバーも見て欲しい!という方に。
もともとこのテーマでは「Font Awesome」を読み込んでいますので、以下のCSSを追加すると、サイドバーの各項目にアイコンを追加できます。
追加した感じは、こちらのブログで確認できます。savoia.hatenablog.jp
追加されるアイコンは、プロフィール、検索、リンク、最新記事、アーカイブ、注目記事、カテゴリー、最新コメント、参加グループです。
上記のアイコンとは、別もものが表示されますが・・・。
詳しくは、こちらで確認してください。
「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' }