すぐ使える！はてなブログ向けアイコン一覧
こちらでははてなブログの標準機能で利用できるアイコンを一覧にしています。
お好みのものを見つけてみてください。
HTMLコードの書き方
HTML編集で下記のコードを追加してください。
<i class="クラス名"></i>
最初のアイコンを表示するには
<i class="blogicon-hatenablog"></i>
と書きます。
CSSコードの書き方
CSS編集で下記のコードを追加してください。
(クラスまたはID):before{
font-family:blogicon;
content:"\(コード)"
カテゴリ名の前に最初のアイコンを表示するには
.categories:before{
font-family:blogicon;
content:"\f000"
と書きます。
↓はてなブログのCSS編集方法はこちら↓
アイコン一覧
| アイコン | クラス名 | コード |
|---|---|---|
 |
blogicon-hatenablog | f000 |
 |
blogicon-plus | f001 |
|
|
blogicon-minus | f002 |
 |
blogicon-reorder | f003 |
 |
blogicon-grid | f004 |
 |
blogicon-chevron-left | f005 |
 |
blogicon-chevron-right | f006 |
|
|
blogicon-chevron-up | f007 |
|
|
blogicon-chevron-down | f008 |
 |
blogicon-external | f009 |
 |
blogicon-plugin | f00a |
|
|
blogicon-member | f00b |
 |
blogicon-account | f00c |
 |
blogicon-design | f00d |
 |
blogicon-cog | f00e |
 |
blogicon-edit | f010 |
|
|
blogicon-addstar | f011 |
 |
blogicon-subscribe | f012 |
 |
blogicon-entry | f013 |
 |
blogicon-notify | f014 |
|
|
blogicon-private | f015 |
 |
blogicon-user | f016 |
 |
blogicon-home | f017 |
 |
blogicon-setting | f018 |
 |
blogicon-draft | f019 |
 |
blogicon-search | f01a |
 |
blogicon-analytics | f01b |
 |
blogicon-help | f01c |
 |
blogicon-comment | f01d |
 |
blogicon-import | f01e |
 |
blogicon-truck | f020 |
 |
blogicon-group | f021 |
 |
blogicon-folder | f022 |
 |
blogicon-add | f023 |
 |
blogicon-pen | f024 |
 |
blogicon-close | f025 |
 |
blogicon-trash | f026 |
 |
blogicon-bookmark | f027 |
 |
blogicon-redirect | f028 |
 |
blogicon-check | f029 |
 |
blogicon-crop | f02a |
|
|
blogicon-repeat | f02b |
 |
blogicon-logout | f02c |
 |
blogicon-star | f02d |
 |
blogicon-pro | f02e |
 |
blogicon-myblog | f030 |
 |
blogicon-recent | f031 |
 |
blogicon-info | f032 |
 |
blogicon-good | f033 |
 |
blogicon-amazon | f034 |
 |
blogicon-twitter | f035 |
 |
blogicon-facebook | f036 |
 |
blogicon-share | f037 |
 |
blogicon-code | f038 |
 |
blogicon-list | f039 |
 |
blogicon-calender | f03a |
 |
blogicon-bracket | f03b |
 |
blogicon-photo | f03c |
 |
blogicon-color | f03d |
 |
blogicon-public | f03e |
 |
blogicon-realtime-preview | f040 |
 |
blogicon-warning | f041 |
 |
blogicon-link | f042 |
 |
blogicon-time | f043 |
 |
blogicon-markdown | f044 |
 |
blogicon-evernote | f045 |
 |
blogicon-music | f046 |
 |
blogicon-niconico | f047 |
 |
blogicon-heart | f048 |
 |
blogicon-heart-alt | f049 |
 |
blogicon-tag | f04a |
 |
blogicon-mail | f04b |
 |
blogicon-help-alt | f04c |
 |
blogicon-sushi | f04d |
 |
blogicon-rss | f04e |
 |
blogicon-smartphone | f051 |
 |
blogicon-laptop | f052 |
|
|
blogicon-mixi | f053 |
 |
blogicon-haiku | f054 |
↓アイコンを利用した機能集はこちら↓
コピペでスマホ向けアイコンメニューを表示する - Change Forward はてなブログで日付部分に時計アイコンを表示する方法 - Change Forward