Web フォント – 林家次男

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

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

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

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

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

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

文字ですよね。

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

現実的かつ簡単ぽい。

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

共通な欧文フォントは

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

Arial 太字

Verdana 太字

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

と勝手に決めつけ。

文字なら 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: 

表示: html: 

表示: html: 

使えますね！

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

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

タグ: Web フォント