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

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

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

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

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

 

考え得れた手段

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

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

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

 

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

文字ですよね。

はてブのロゴを眺めているさま
はてブのロゴを眺めているさま

 

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

現実的かつ簡単ぽい。

 

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

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

共通な欧文フォントは

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • 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>

使えますね!

 

まとめ

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

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


投稿日

カテゴリー:

投稿者:

コメント

“Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法” への21件のフィードバック

  1. georgek5555 Avatar

    おもしろい。RT @hayashikejinan: 更新。これを思いついたときはほんと電球マークが見えた勢いでした。 / Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法

  2. beatride Avatar

    サイトのデザインおされ!

  3. kasumani Avatar

    title: Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法 アイコンフォント、便利ですよねほんと。もう使わずにはいられない体になってます。 アイコンフォントに含まれているわけも

  4. web_shufu Avatar

    普通のフォントで代用…でいいですよね。ぼくもそうしてますがもっと雑。

  5. […] 参考 Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法 […]

  6. […] はてなブックマークのアイコンcssは「Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法」を参考にさせていただきました。 […]

  7. […] Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法 | ホホ冢次男 […]

  8. ichiy Avatar

    ちょうど困ってたので助かりました

  9. […] Font Awesome などアイコンフォントにないはてなブックマークを自力で追加す… […]

  10. シュウ (@ixut) Avatar

    参考になりました!CSSのletter-spacingプロパティを使ってBと!の間を詰めればもっと似せることができるんじゃないかな。

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

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

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

  14. […] 実際の方法を紹介しているのは Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法。 […]

  15. acr0 Avatar

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

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

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

  18. […] コチラの記事を参考に「B!」だけ自作して、style.cssに書き込みました!Font Awesome などアイコンフォントにないはてなブックマークを自力で追加す…開いた口が半開きになるブログ – Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法hayashikejinan.com […]

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

コメント、してみません?