フジブロっ!

はてなブログのカスタマイズに役立つ記事やツール、デザインテーマの制作を行なっている、カスタマイズ専門ブログ

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

どうも!フジグチです!

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

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

例えば とか とか。

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

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

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

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

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

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

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

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

HTMLで使用する方法

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

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

<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編集に貼り付けることが出来ますが<i class="blogicon-home"></i>と貼り付け、プレビューを確認しようと切り替えてみても何も表示されません。

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

その場合は<i class="blogicon-home">&nbsp;</i>と空白を表す文字を入れると、表示することが出来ます。

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

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

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

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

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

<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-<i>タグ付き

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

コピーされるコード▽
例:<i class="blogicon-hatenablog"></i>

HTML-<i>タグ+lg付き

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

コピーされるコード▽
例:<i class="blogicon-hatenablog lg"></i>

HTML-<span>タグ付き(見たまま編集用)

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

コピーされるコード▽
例:<span class="blogicon-hatenablog">&nbsp;</span>

CSS-コード

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

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

CSS-表示コード付き

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

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

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

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

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

HTML
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

まとめ

以上はてなブログで使えるアイコンフォントをまとめてみました。

もともとはてなブログである限り読み込まれているものなので、FontAwesomeなどのアイコンサイトと違い、読み込むものが増えないのがいいですね。

これからこのアイコンフォントを活用したカスタマイズも、どんどん公開していきます。