自分の好きなアイコンだけを選んだウェブフォントを使う方法

自分で作成

まずは自分が使いたいアイコンをsvgという形式で用意します。Illustratorなどで作成できます。それぞれのサイトなどにあるロゴマークを自分でトレースしてもいいですし、たいがいはプレスキットなどでeps形式かなにかでダウンロードできるようになっています。

• 素材集 – 株式会社はてな
• feedly. your news. delivered.
• Using the LINE Logo
• Press « Pocket Blog

公開されているものを使う

ウェブ上を探すと公式以外でもロゴをベクターデータにして配布している人がいます。3年半ほど前になリますが、ドウラクさんが今回のアイコンフォントの用途に使うためとしてFeedly、LINE、はてなブックマーク、Pocket、それぞれのロゴをトレースしたSVGデータを配布しています。
douraku.sw2x.com
ただ、3年半前なのでLINEのロゴなどは微妙に古いです。

とりあえず、これでsvgデータが揃いました。

SVGファイルを取り込む

画面上の方の「Drag custom SVG icons or SVG font here.」というところに先ほど作成したSVGファイルをドラッグアンドドロップします。

SVGファイルが取り込まれました。

使うアイコンを選択してダウンロード

ほかにも使いたいアイコンがあれば選んで、右上の赤いボタン「Download Webfont」をクリックしてダウンロードします。

ダウンロードしたzipファイルを解凍するといくつかのファイルが入っています。使い方によってどのファイルを使うのかは変わります。demo.htmlを開くと、実際にどう表示されるのか見ることができます。

cssをはてなブログのcssにコピー

ダウンロードしたファイルの中から「fontello-embedded.css」というファイルを開きます。（最初のfontelloという部分はフォント名なので変更することもできます。）
中にはたくさんの文字列があるのですが、その中からまずは以下の部分を自分のはてブのcssへとコピーします。

@font-face {
font-family: 'fontello';
src: url('data:application/octet-stream;base64,d09GRg（略）QAAA==') format('woff'),
url('data:application/octet-stream;base64,AAEAAA（略）IARAAA') format('truetype');
}

（長いので一部省略しています。）

同じcssから以下の部分もコピーします。（最低限必要なものだけを抜き出しています。）

 [class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
}
.icon-line:before { content: '\e800'; }
.icon-pocket:before { content: '\e801'; }
.icon-facebook:before { content: '\e802'; }
.icon-feedly:before { content: '\e803'; }
.icon-gplus:before { content: '\e804'; }
.icon-hatebu:before { content: '\e805'; }

記事内などでの使い方

あとははてなブログで元々用意されているものと同じように使います。

■<i>タグで使う
LINE

<i class="icon-line" style="font-size:200%;font-style:normal;"></i> LINE

■cssの疑似要素で使う
LINE

<span class="icon-line"> LINE</span>