はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ
はてなブログでは，デフォルトで読み込まれるCSS「globalheader.css」で，79種類のアイコンWebフォントを読み込んでいます．これらのアイコンで間に合うのならわざわざ「Font Awesome」を読み込む必要もなく，ページの軽量化が期待できます．そこで，本記事では，それらのアイコンの一覧と使い方をまとめました．
はてなブログのアイコンWebフォント一覧
とりあえず，どんなアイコンが使えるのか見てみましょう．
よく使いそうなアイコンはひと通り揃ってそうな気がしますね！
しろかい！でも，一部のソーシャルメディアのアイコンを除き，基本的にはこのWebフォントしか使用していません．Font Awesomeは一切使用していません．
では，使い方を見ていきます．
使い方その1：<i>タグを使う
アイコンを表示したい部分に，以下のように記述すればOKです．
<i class="(使用したいアイコンのクラス名)"></i>
アイコンのクラス名は後述の一覧を見てください．
例えば，
<i class="blogicon-twitter"></i> Twitter
と記述すると，
のように表示されます．
サイズの大きなアイコンを使う．
class名にlgを指定すると大きなアイコンを使用できます．
<i class="blogicon-twitter"></i> Twitter <i class="blogicon-twitter lg"></i>
と記述すると，
のように，lgを指定した右側のアイコンが大きくなっているのが分かります．
もちろん，WebフォントなのでCSSのfont-sizeでサイズを指定しても構いません．
使い方その2：CSSを使う
アイコンを表示したいセレクタに，
font-family: "blogicon";content: "(使用したいアイコンのコード)";
を記述すればOKです．
アイコンのコードは後述の一覧を見てください．
例えばこんな風に書きます．
.selector:before { font-family: "blogicon"; content: "\f035"; }
しろかい！では，「続きを読む」ボタンの とかに利用しています．
はてなブログのアイコンWebフォント一覧
はてなブログで利用できるアイコンWebフォントを，クラス名・コード名とともに一覧にしておきます．
この一覧，公式には用意されていないんですよね^^;
| アイコン | クラス名 | コード |
|---|---|---|
| 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 | |
| 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 |
まとめ
はてなブログにおいてデフォルトで読み込まれるアイコンWebフォントを紹介しました．よく使われそうなアイコンはひと通り利用できるので，Font Awesomeなどの外部のWebフォントを使う前に，代用できるアイコンがないか調べてみるとよいでしょう．
