はてなブログで使えるアイコンフォント（Webフォント）123種類

iタグで使う

このアイコン（フォント）を使うには、<i>タグを使って、以下のように記述します。

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

これで↓のように表示されます。
はてなブログ

hatenablogの部分を変えると別のアイコンになります。
記事編集で使う記法によっては、タグの間に何か入れなければ表示できないものもあるそうなので、その場合は空白（&nbsp;）を入れると表示されます。

クラス名にlgを加えるとフォントサイズが大きくなります。（約1.3倍）

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

これで↓のように表示されます。
はてなブログ

cssでもっと大きくもできますし、色も大丈夫。

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

これで↓のように表示されます。
はてなブログ

cssの疑似要素で使う

使いたい要素のcss擬似要素にfont-family: blogicon;とcontent: "\f000";をつければOKです。\f000の部分はアイコンによって変わります。

html

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

css

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

表示
はてなブログ

ブログのデザイン編集など、直接htmlを弄れない部分もこれでアイコンを付けることができます。

表示できるアイコン一覧

現在はてなブログで表示できるアイコンとクラス名、コードの一覧です。一部クラス名が定義されていないものもあります。

まとめ

これだけあればFont Awesomeに頼らなくても大抵は何とかなりそうです。
しかし、これはあくまで運営で必要なもの。これがいつまでも使えるとは限りませんし、欲を言えばLINEやFeedlyのアイコンも欲しいところ。だからと言ってFont Awesomeはちょっとたくさんありすぎてそこまで必要ない、自分に必要なものだけがあればいいんです。

というわけで、今度は自分で必要なものだけのアイコンフォントを作ってそれを使うことができないか試してみます。