WEB制作 シュマリ管理人 景品表示法に基づく表記：当サイトのコンテンツには商品プロモーションが含まれています。

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

最後に

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

駿河屋スタッフ募集中

コメントを残す

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

RECOMMENDこちらの記事も人気です。

ABOUTこの記事をかいた人

幼少期、絵描きになりたくて毎日絵を描く。地元の写生大会で金賞受賞。
高校生の頃からバンドを組み、作詞・作曲・編曲・映像を担当。ライブで知り合ったバンドマンとは今でも仲良し。

25歳から独学でデザイン・ウェブ制作を0から学習し、ウェブデザイナーとして中途入社。自分だけの武器を探し、デザイン、マークアップ、企画、マーケティング、SNS、広告など片っ端から勉強。
今はその知識を活かしてPdMを担当。

その傍ら数々の副業（イラスト制作、アフィリエイト、古着転売、ハンドメイド、作曲）をして、現在30代に突入。

東海在住。
運営ブログ「シュマリ」は月間3万PV。
読んだ漫画は4万冊。

NEW POSTこのライターの最新記事