読者です 読者をやめる 読者になる 読者になる

しろかい!

アプリ開発や機械学習などの開発Tips.

はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ

はてなブログ

はてなブログでは,デフォルトで読み込まれるCSS「globalheader.css」で,79種類のアイコンWebフォントを読み込んでいます.これらのアイコンで間に合うのならわざわざ「Font Awesome」を読み込む必要もなく,ページの軽量化が期待できます.そこで,本記事では,それらのアイコンの一覧と使い方をまとめました.

はてなブログのアイコンWebフォント一覧

とりあえず,どんなアイコンが使えるのか見てみましょう.

f:id:shun9167:20150531150136p:plain

よく使いそうなアイコンはひと通り揃ってそうな気がしますね!
しろかい!でも,一部のソーシャルメディアのアイコンを除き,基本的にはこのWebフォントしか使用していません.Font Awesomeは一切使用していません.

では,使い方を見ていきます.

使い方その1:<i>タグを使う

アイコンを表示したい部分に,以下のように記述すればOKです.

<i class="(使用したいアイコンのクラス名)"></i>

アイコンのクラス名は後述の一覧を見てください.

例えば,

<i class="blogicon-twitter"></i> Twitter

と記述すると,

Twitter

のように表示されます.

サイズの大きなアイコンを使う.

class名にlgを指定すると大きなアイコンを使用できます.

<i class="blogicon-twitter"></i> Twitter <i class="blogicon-twitter lg"></i>

と記述すると,

Twitter

のように,lgを指定した右側のアイコンが大きくなっているのが分かります.
もちろん,WebフォントなのでCSSfont-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フォントを使う前に,代用できるアイコンがないか調べてみるとよいでしょう.

参考記事