はてなブログで使えるアイコンフォント全125種

どうも！フジグチです！

ブログのカスタマイズを進めていく中で一度は使いたくなるのが、「アイコン」ですよね。

はてなブログではデフォルトで読み込まれている「アイコンフォント」があります。

例えばとかとか。

これをCSSで装飾していくと、フォローボタンやシェアボタンを作ることができます。

はてなブログではこうしたアイコンフォントが125種類用意されています（2021/6/7 時点）

カスタマイズを公開している都合上アイコンフォントをよく使うのですが、自分で用意したほうが使い勝手が良さそうなので、今回まとめてみました。

この記事の特徴

アイコンを大きく表示しているので探しやすい
アイコンをクリックしてコードをコピーできる
使いたい形式に合わせてコードも付与できる

はてなブログで使えるアイコンフォント全125種

アイコンフォントの使い方
アイコンコードのコピー方法
はてなブログで使えるアイコンフォント全125種一覧表
まとめ

アイコンフォントの使い方

アイコンフォントの使い方は、HTMLでタグにクラス名を付けて表示する方法と、CSSの疑似要素を使用する方法の2種類あります。

※一部アイコンはCSSのみでしか表示出来ないものもあります。

HTMLで使用する方法

アイコンフォントをHTMLで使用するにはアイコンに対応したクラス名をタグもしくはタグで囲います。

記述方法は以下のようになります。

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

上のコードで ←家のアイコンが表示されます。

使用例を挙げますと、グローバルナビゲーションの「ホーム」の前に家のアイコンを表示したいという場合は下記のようになります。

<li>
  <a href="https://cappuccino.fuji-blo.com/">
    <i class="blogicon-home"></i>ホーム
  </a>
</li>

表示例▽ アイコンフォント使用例

大きく表示したい場合

大きく表示したい場合はCSSを使わなくても、クラス名にlgを加えると大きく表示されます。（間に半角スペースが必要です）

<i class="blogicon-home lg"></i>

左が元のサイズ、右がlgを付けたアイコンです。

さらにサイズを変えたい場合は、CSSで調整していく必要があります。

見たまま編集で使用する際の注意点

見たまま編集にもHTML編集との切り替えが付いているので、HTML編集に貼り付けることが出来ますがと貼り付け、プレビューを確認しようと切り替えてみても何も表示されません。

これはタグの間に何もテキストが挟まれていないので、不要な空のタグと判断され自動的に削除されるためです。

その場合は と空白を表す文字を入れると、表示することが出来ます。

…しかし、もう1つ問題があります。表示は出来ますが、今度はタグが強調を表すタグに書き換えられてしまいます。

気にならないようならそのままでも良いのですがタグは、はてなブログのエディター内のの文字をクリックすると付与されるもので、斜体になります。

さらに、カスタマイズでアンダーラインなどの装飾を入れている場合はそちらも干渉してきます。

←アンダーラインの装飾が干渉したアイコン

そういったことを回避するためにはタグを使えば解決できます。

<span class="blogicon-home">&nbsp;</span>

CSSの疑似要素で表示する方法

この記事では「疑似要素」の説明は割愛しますが、CSSの疑似要素で表示する方法は表示したい要素の疑似要素に、表示したいアイコンのコードを入れます。

content: "表示したいアイコンのコード";
font-family: blogicon;

使用例としてカテゴリの前にフォルダのアイコンを表示する場合は、以下のように記述します。\f022がフォルダのアイコン部分です。

.categories a::before {
    content: "\f022";
    font-family: blogicon;
}

表示例▽
CSSでアイコンフォントを表示する方法

実際はテキストとの余白の調整などがあるので、別途余白の指定をしなければなりませんが、これがCSSで表示する方法です。

自分でHTMLを弄ることが出来ない、はてなブログのHTMLの部分は、このようにCSSで表示する方法を使っていきます。

アイコンコードのコピー方法

ここからはアイコンのコードをコピーする方法を説明します。

使いたいアイコンを選び、そのアイコンをクリックするだけでコードがコピーされるようになっています。

各チェックボックスにチェックを入れて切り替えると、それに対応した形式のコードになりますので、使いたい形式に合わせてコピーして下さい。

メモ

どの形式でコピーされたか確認しやすいように、コピーしたコードを表示するようにしていますが、クリックした時点でコピーされていますので、表示されたものをコピーし直す必要はありません。

以下に簡単に使用方法を解説します。

HTML-クラス名

初期状態はHTMLの【クラス名】にチェックが入っており、クラス名のみコピーします。

コピーされるコード▽
例：blogicon-hatenablog

HTML-タグ付き

【タグ付き】にチェックを入れた状態でアイコンをクリックすると、タグを付与したコードがコピーされます。

コピーされるコード▽
例：

HTML-タグ＋lg付き

【タグ＋lg付き】にチェックを入れた状態でアイコンをクリックすると、タグにアイコンを大きく表示するlgを付与したコードがコピーされます。

コピーされるコード▽
例：

HTML-タグ付き（見たまま編集用）

【タグ付き（見たまま編集用）】にチェックを入れた状態でアイコンをクリックすると、タグと空タグの削除を防止する為の を付与したコードがコピーされます。

コピーされるコード▽
例：

CSS-コード

【コード】にチェックを入れた状態でアイコンをクリックすると、CSSのアイコンコードのみコピーされます。

コピーされるコード▽
例：\f000

CSS-表示コード付き

【表示コード付き】にチェックを入れた状態でアイコンをクリックすると、アイコンの表示に必要なCSSコードが付与された状態でコピーされます。

コピーされるコード▽
例：content: "\f000"; font-family: blogicon;

はてなブログで使えるアイコンフォント全125種一覧表

それでは以下からアイコンを選び、コピーされたコードをお使いください。

※CSSのみと表記しているものは、CSSのどちらかのチェックボックスにチェックを入れないと、コピーすることが出来ないので注意してください。

HTML クラス名 タグ付き タグ＋lg付き タグ付き（見たまま編集用）

CSS コード表示コード付き

▽コピーしたコードが表示されます▽

アイコン	クラス名	コード
	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
	blogicon-twitter	\f035
	blogicon-facebook	\f036
	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
	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
		\f050
	blogicon-smartphone	\f051
	blogicon-laptop	\f052
	blogicon-mixi	\f053
	blogicon-haiku	\f054
	blogicon-amp	\f055
	blogicon-quote	\f704
	blogicon-toggle-on	\f71d
	blogicon-toggle-off	\f71e
	blogicon-odaislot	\f721
	blogicon-grid-3x3	\f723
	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
	blogicon-gist	\f717
	blogicon-pixiv	\f718
	blogicon-miil	\f719
	blogicon-youtube	\f71a
	blogicon-instagram	\f71b
	blogicon-google-photos	\f71c
	blogicon-others	\f710
	blogicon-rakuten	\f722
	blogicon-breadcrumb	\f726
	blogicon-profilecard	\f728
		\f729
	blogicon-snippet	\f72a
	blogicon-dazn	\f72b