title: Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法

アイコンフォント、便利ですよねほんと。もう使わずにはいられない体になってます。

近頃はソーシャルアイコンも充実の一途を辿り。

しかしながら、ソーシャルボタンでもよく使われるはてなブックマークは日本人が対象。

アイコンフォントに含まれているわけもなく、自力でどうにかしてみよう！ということで。

考え得れた手段

• 自分で作って既存のものへ自分でマージする
• 自分で作って既存のものへマージしてもらう
• 全部自分で作る

難易度の低い順番に並べましたがそもそもの難易度が高い…。

作るしかないかーとはてブロゴを眺めていて、閃きました。

はてブのロゴって、文字。

文字ですよね。

何が言いたいかってつまるところ、普通のフォントで代用できるんじゃないの？ということ。

現実的かつ簡単ぽい。

Windows と Mac 共通の欧文フォントをロゴと比べてみる

Windows と Mac 共通の欧文ではてブアイコンっぽくするのが一番作業コストが低そう。

共通な欧文フォントは

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

こんな感じ？ここから似てるっぽいのを見繕う。

Arial 太字

Verdana 太字

Verdana の太字が似てる、遠目で見たら気づきにくいぐらいではある。

と勝手に決めつけ。

文字なら css の疑似要素でなんとかなりますね。

はてブのフォントアイコン風 css を書く！

ぼくが使っているのは Font Awesome なので、Font Awesome に準拠したクラス指定で書きました。

お使いのフォントアイコンに合わせる書き方がいいでしょう。

まず css。簡単。

/* Font Awesome hatena bookmark */
.fa-hatena:before {
	content: "B!";
	font-family: Verdana;
	font-weight: bold
}

scss の場合は、

//
// Font Awesome hatena bookmark
//
.fa-hatena {

	&:before {
		content: "B!";
		font-family: Verdana;
		font-weight: bold;
	}
}

こんな感じで書けば Font Awesome の場合、

表示: html: <i class="fa fa-hatena"></i>

表示: html: <i class="fa fa-hatena fa-2x"></i>

表示: html: <i class="fa fa-hatena fa-3x"></i>

使えますね！

まとめ

ブログページ右上のところでもこれを使ってますのでサンプルとしてわかりやすいかと。

シュッと使えてギリギリ気にならない見た目になるのでこれは使えると確信した瞬間でした。