MoonNote

はてなブログテーマ / CSS / jQuery

はてなブログで使えるアイコンフォント一覧 2015/12/06 版

f:id:waitingmoon:20151206215119p:plain

はてなブログには標準で読み込まれるアイコンフォントがあり、クラス等を指定すれば誰でも使えることは以下の記事で以前から知っていたのですが、なんとなく CSS を見ていたら使えるアイコンの数が以前よりかなり増えていることが分かったのでメモしておきます。

bulldra.hatenablog.com

一覧

以前から使えていたもの

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

追加されていたもの

No クラス アイコン
f700 blogicon-editor-unorderedlist
f701 blogicon-editor-orderedlist
f702 blogicon-editor-link
f703 blogicon-editor-seemore
f704 blogicon-editor-blockqupte
f705 blogicon-editor-footnote
f706 blogicon-editor-toolbar-show
f707 blogicon-editor-toolbar-hide
f708 blogicon-editor-bold
f709 blogicon-editor-italic
f70a blogicon-editor-strike
f70b blogicon-editor-underline
f70c blogicon-editor-fontsize
f70d blogicon-editor-color
f710 blogicon-others
f711 blogicon-fotolife
f713 blogicon-curation-bar-toggle
f714 blogicon-paint
f715 blogicon-gourmet
f716 blogicon-flickr
f717 blogicon-gist
f718 blogicon-pixiv
f719 blogicon-miil
f71a blogicon-youtube
f71b blogicon-instagram
f71c blogicon-google-picker
f71d blogicon-toggle-on
f71e blogicon-toggle-off
f720 blogicon-star-o
f721 blogicon-odaislot

一応使い方を掲載

使い方 その1

<i class="blogicon-hatenablog"></i>

i タグにアイコンのクラスを指定するとアイコンが表示されます。記事の中でアイコンを使いたい場合などに。

使い方 その2

.date::before {
    content: "\f043";
    display: inline-block;
    font-family: blogicon;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

擬似要素に font-family: blogiconcontent: "\番号" を指定すると、HTML を編集出来ない部分にもアイコンを表示できます。Blank の記事の日付左の時計アイコンはこの方法で表示しています。

まとめ

改めて見ると、FontAwesome 等を別途で読み込まなくても困らないくらいの種類がありますね。ニコニコ動画や Pixiv など海外産のアイコンフォントでは使えないローカルサービスのアイコンが使えるのもありがたいです。…feedly があると最高なんだけどなあ。