【はてなブックマークのアイコンフォント】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>

最後に

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

今日の人気記事

• 48グループからAV女優になった元アイドルメンバーまとめ【AKB・SKE・HKT・NMB】
• 世界のおもしろい言語！かっこいい・かわいい文字がたくさん
• ニコニコ動画のサムネ画像をダウンロード保存する方法【大サイズURL取得】
• アニメ・ゲーム・漫画のタイトル風ロゴジェネレーターまとめ！簡単ロゴ作成
• 【ドラゴンキングダムとは】冨樫がイラストを描いたカードゲーム【邪教を広める者 kraft.heil】
• シングル・ダブル・トリプルの次は？クワトロ？
• 【元アイドルAV女優】中川美優→依田まのはガセ！【まねきケチャリーダー】
• おすすめ冬の歌25選！邦ロックバンド冬ソング特集！定番からマイナーまで
• 英語のエラーメールの意味・解説一覧（failure notice、MAILER-DAEMON）
• 元アイドルAV女優！？新道みやが元「=LOVE（イコラブ）」の佐竹のん乃に激似と話題