はてなブログで使えるアイコンフォント一覧【全122種】2020年9月時点

・はてなブログで使えるアイコンフォントの使い方を知りたい。
・はてなブログで使えるアイコンフォントの一覧を見たい。

こういった疑問に答えます。

本記事の内容

1. はてなブログで使えるアイコンフォント(blogicon)の一覧をまとめました（全122種）
2. はてなブログのアイコンフォント(blogicon)の使い方

この記事を書いている私は、2006年から始めて、アフィリエイト歴は13年ほど。
当ブログの他にも複数ブログを運営していて、毎月コンスタントに収益が発生しています。

こういった私が、解説していきます。

はてなブログのデフォルトで使えるアイコンフォント(blogicon)について

ブログで使えるアイコンフォントといえば、有名なのは「Font Awesome」だと思います。

≫Font Awesome　https://fontawesome.com/　

しかし、はてなブログでは、「Font Awesome」を読み込まなくても、
自動的にはてなブログ独自のフォントアイコンが使えるようになっています。

はてなブログのHTMLソースを見ると、ヘッダー部に以下の1行が自動的に入ってます。

<link rel="stylesheet" type="text/css" href="https://cdn.blog.st-hatena.com/css/blog.css?version=83d4e140de222456fed90d9724d259d11fdfc647&amp;env=production"/>

このhttps://cdn.blog.st-hatena.com/css/blog.css でアイコンフォントが読み込まれています。

はてなブログのアイコンフォントを使えば、
「Font Awesome」の外部ファイルを読み込まなくて済むので、
ページの軽量化ができそうです。

ちなみに、当ブログでは、「はてなブログのアイコンフォント(blogicon)」だけを使っていて、「Font Awesome」は未使用です。

はてなブログで使えるアイコンフォント(blogicon)の一覧まとめ（全122種）【2020年9月時点】

2020年9月時点で、全部で122種類のアイコンフォントがありました。

アイコン	クラス名	コード	(日本語名)
	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-pages	f00f	ページ
	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-odai	f01f	お題
	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-star-o	f720	スター
	blogicon-pro	f02e	プロ
	blogicon-myblog	f030	マイブログ
	blogicon-recent	f031	最新
	blogicon-info	f032	インフォメーション
	blogicon-good	f033	いいね
	blogicon-amazon	f034	Amazon
	blogicon-twitter	f035	Twitter
	blogicon-facebook	f036	Facebook
	blogicon-share	f037	シェア
	blogicon-code	f038	コード
	blogicon-list	f039	リスト
	blogicon-calendar	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	Evernote
	blogicon-music	f046	iTunes
	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	RSS
-	-	f050	-
	blogicon-smartphone	f051	スマホ
	blogicon-laptop	f052	パソコン
	blogicon-mixi	f053	ミクシィ
	blogicon-haiku	f054	俳句
	blogicon-amp	f055	増幅
	blogicon-quote	f704	引用
	blogicon-toggle-on	f71d	トグル ON
	blogicon-toggle-off	f71e	トグル OFF
	blogicon-odaislot	f721	スロット
	blogicon-grid-3x3	f723	グリッド 3x3
	blogicon-grid-vertical	f724	グリッド 縦
	blogicon-pinned	f727	ピン留め
	blogicon-editor-unorderedlist	f700	箇条書き
	blogicon-editor-orderedlist	f701	番号付きリスト
	blogicon-editor-link	f702	リンク
	blogicon-editor-seemore	f703	続きを読む
	blogicon-editor-blockquote	f704	引用
	blogicon-editor-footnote	f705	脚注
	blogicon-editor-toolbar-show	f706
	blogicon-editor-toolbar-hide	f707
	blogicon-editor-bold	f708	太字
	blogicon-editor-italic	f709	斜体
	blogicon-editor-strike	f70a	打消
	blogicon-editor-underline	f70b	アンダーライン
	blogicon-editor-fontsize	f70c	文字の大きさ
	blogicon-editor-color	f70d	文字色
	blogicon-editor-insert-toc	f725	目次
	blogicon-fotolife	f711	フォトライフ
-	-	f712	-
	blogicon-curation-bar-toggle	f713	サイドバー開閉
	blogicon-paint	f714	ペイント
	blogicon-gourmet	f715	レストラン
	blogicon-flickr	f716	Flickr
	blogicon-gist	f717	Gist
	blogicon-pixiv	f718	pixiv
	blogicon-miil	f719	ミイル
	blogicon-youtube	f71a	YouTube
	blogicon-instagram	f71b	Instagram
	blogicon-google-picker	f71c	Googleフォト
	blogicon-others	f710	その他
	blogicon-rakuten	f722	楽天
	blogicon-breadcrumb	f726	パンくずリスト
	blogicon-profilecard	f728	プロフィール
	blogicon-snippet	f72a	定型文
	blogicon-dazn	f72b	DAZN

はてなブログのアイコンフォント(blogicon)の使い方

HTMLの中で、iタグを使う場合

<i class="blogicon-hatenablog"></i> はてなブログ

HTMLの中で、上記のように記述すると、以下のように表示されるはずです。

• はてなブログ

フォントを大きくしたい場合

<i class="blogicon-hatenablog lg"></i> はてなブログ

上記のように、クラス名の末尾に「半角スペース＋lg」を追加すると、少し大きなフォントになります。

• はてなブログ

CSSの疑似要素で使う場合

CSSの疑似要素で使う場合は、デザインCSSの中に以下のような形で追加すればよいです。

<span class="samplecss">はてなブログ</span>

.samplecss:before{
font-family: blogicon;
content: "\f000";
}

まとめ

アイコンフォントで有名なのは「Font Awesome」ですが、
よく使うものは「はてなブログのアイコンフォント(blogicon)」に大抵そろっています。

外部ファイルを読み込まないのでページも軽量化できます。

「はてなブログのアイコンフォント(blogicon)」を活用しましょう。