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

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

bulldra.hatenablog.com

一覧
- 以前から使えていたもの
- 追加されていたもの
一応使い方を掲載
- 使い方その1
- 使い方その2
まとめ

一覧

以前から使えていたもの

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: blogicon と content: "\番号" を指定すると、HTML を編集出来ない部分にもアイコンを表示できます。Blank の記事の日付左の時計アイコンはこの方法で表示しています。