【はてなブックマークのアイコンフォント】Font Awesome と同じやり方で実装する方法

最近Font Awesomeの便利さに気づき、シェアボタンなどを一新していたのですが・・・

はてなブックマークのアイコンフォントがない!

はてブのロゴは、文字で「B!」

はてブのロゴはツイッターやインスタグラムとは違って、絵ではなく文字です。

つまり、フォントを設定すれば、それっぽいアイコンが作成できます!

「はてブ」のフォントアイコンをcssで作成する

Font Awesomeに準拠したクラス指定で管理面も考慮したコードを紹介します。

css

.fa-hatena:before {
    content: "B!";
    font-family: Verdana; /* はてブのフォントにもっとも近い */
    font-weight: bold
}

html

<i class="fa fa-hatena"></i>

最後に

色々なシェアボタン一覧の記事を作ろうかな。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です