はてなブログで使えるアイコン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フォントを使う前に,代用できるアイコンがないか調べてみるとよいでしょう.