はてなブログで標準的に利用可能なアイコン絵文字
はてなブログには各種サービスやブログ内のアイコン画像がWebフォントとしてインストールされており、特定のクラスをつけたタグを用いる事で「はてなブログ」の様に文字列として出力可能となっています。はてなブログ専用の絵文字という事ですね。
「<i class="blogicon-hatenablog"></i>はてなブログ」
こんな感じで、バイラル風のシェアボタンやブログパーツを作る時に重宝するのですが、実際に出力される内容について把握しきれていなかったので、これを機会に現時点で利用可能なアイコン絵文字フォントのリファレンスを作成しました。
アイコン絵文字フォント一覧
| No | クラス名 | アイコン |
|---|---|---|
| 000 | blogicon-hatenablog | |
| 001 | blogicon-plus | |
| 002 | blogicon-minus | |
| 003 | blogicon-reorder | |
| 004 | blogicon-grid | |
| 005 | blogicon-chevron-left | |
| 006 | blogicon-chevron-right | |
| 007 | blogicon-chevron-up | |
| 008 | blogicon-chevron-down | |
| 00a | blogicon-external | |
| 00b | blogicon-plugin | |
| 00c | blogicon-member | |
| 00d | blogicon-account | |
| 00e | blogicon-design | |
| 00f | blogicon-cog | |
| 010 | blogicon-edit | |
| 011 | blogicon-addstar | |
| 012 | blogicon-subscribe | |
| 013 | blogicon-entry | |
| 014 | blogicon-notify | |
| 015 | blogicon-private | |
| 016 | blogicon-user | |
| 017 | blogicon-home | |
| 018 | blogicon-setting | |
| 019 | blogicon-draft | |
| 01a | blogicon-search | |
| 01b | blogicon-analytics | |
| 01c | blogicon-help | |
| 01d | blogicon-comment | |
| 01e | blogicon-import | |
| 020 | blogicon-truck | |
| 021 | blogicon-group | |
| 022 | blogicon-folder | |
| 023 | blogicon-add | |
| 024 | blogicon-pen | |
| 025 | blogicon-close | |
| 026 | blogicon-trash | |
| 027 | blogicon-bookmark | |
| 028 | blogicon-redirect | |
| 029 | blogicon-check | |
| 02a | blogicon-crop | |
| 02b | blogicon-repeat | |
| 02c | blogicon-logout | |
| 02d | blogicon-star | |
| 02e | blogicon-pro | |
| 030 | blogicon-myblog | |
| 031 | blogicon-recent | |
| 032 | blogicon-info | |
| 033 | blogicon-good | |
| 034 | blogicon-amazon | |
| 035 | blogicon-twitter | |
| 036 | blogicon-facebook | |
| 037 | blogicon-share | |
| 038 | blogicon-code | |
| 039 | blogicon-list | |
| 03a | blogicon-calender | |
| 03b | blogicon-bracket | |
| 03c | blogicon-photo | |
| 03d | blogicon-color | |
| 03e | blogicon-public | |
| 040 | blogicon-realtime-preview | |
| 041 | blogicon-warning | |
| 042 | blogicon-link | |
| 043 | blogicon-time | |
| 044 | blogicon-markdown | |
| 045 | blogicon-evernote | |
| 046 | blogicon-music | |
| 047 | blogicon-niconico | |
| 048 | blogicon-heart | |
| 049 | blogicon-heart-alt | |
| 04a | blogicon-tag | |
| 04b | blogicon-mail | |
| 04c | blogicon-help-alt | |
| 04d | blogicon-sushi | |
| 04e | blogicon-rss | |
| 051 | blogicon-smartphone | |
| 052 | blogicon-laptop |
まとめ
検索ボタンや各種サービスのアイコンもWebフォント化されているので、ほとんどの場合はわざわざアイコン画像を用意しなくても済む事がわかります。画像よりもWebフォントを利用した方が軽いですし、拡大縮小・色変更などの取り回しも楽なのでブログパーツ等に絵文字フォントを活用していこうと考えています。
