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

どうも！フジグチです！

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

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

例えば とか とか。

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

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

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

• アイコンフォントの使い方
  • HTMLで使用する方法
  • 大きく表示したい場合
  • 見たまま編集で使用する際の注意点
  • CSSの疑似要素で表示する方法
• アイコンコードのコピー方法
  • HTML-クラス名
  • HTML-<i>タグ付き
  • HTML-<i>タグ＋lg付き
  • HTML-<span>タグ付き（見たまま編集用）
  • CSS-コード
  • CSS-表示コード付き
• はてなブログで使えるアイコンフォント全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で表示する方法です。

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

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

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

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

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

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

HTML-クラス名

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

HTML-<i>タグ付き

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

HTML-<i>タグ＋lg付き

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

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

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

CSS-コード

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

CSS-表示コード付き

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

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

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

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