はてなブログにおいて、アイコンWEBフォントを使う方法

はてなブログでは、どのブログでも以下のWEBフォントを読み込んでいます。

これは、選択したテーマに関係なく最初に読み込む「globalheader.css」によって読み込まれますので、簡単にこれらのアイコンは使えます。

下記のCSSをデザインCSSに追加するだけでこんなこともできます。

.hoge1:before {
font-family: "blogicon";
content: "\f027";
}

フォントファミリーを指定して、どのコードかを指定するだけで使えます。
（上記のはてブマークは、フォントサイズと色の指定も追加してますけど。）

コード表を作ったのでアップします。

テーマRougeでは、さらにFont Awesome Iconsを追加で読み込んでいます。

数カ所しか使っていないのに、このフォントを読み込むのは、表示が遅くなる原因になりそうですが、デザインを優先してしまいました。

こちらのアイコンWEBフォントの使い方こちら。

.hoge2:before {
font-family: FontAwesome;
content: "\f073";
}

上記「f073」は、タイトルの日付につけているアイコンのコードです。

例えば、サイドバーのプロフィールというタイトルに人のアイコンを付ける場合。

.hatena-module-profile div.hatena-module-title:before {
font-family: FontAwesome;
content: "\f007";
}

上記のCSSでこうなります。

しかし、このままだと、サイドバーのタイトルは太字の指定がされているのでアイコンも太って潰れています。
なので、下記のCSSも追加した方がいいです。

{
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

こちらのアイコンフォントFont Awesome Iconsは、現在500個以上のアイコンが用意されているので、ぜひカスタマイズに使ってみてください。

追記

テーマRouge以外で、Font-Awesomeを使いたい場合は、デザインCSSに下記を追加すると同様に使えます。
（デザインCSSの途中に書くと上手くできないようなので、最初の方に書いたほうがいいです。）

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");