はてブロゴのスクエア型アイコンフォントを作成

前回、LINEのスクエア型アイコンフォントを作成しました。

四角い形をしたLINEのWEBアイコンフォントがネットを探しても無かったので作ってみました。以下のようなアイコンフォントが利...

一応そのとき、はてブのスクエア型アイコンフォントも作成したので載せておきます。

以下のようなアイコンフォントが利用できます。

はてブのSVG

photo by saksan

スポンサーリンク
レクタングル(大)広告

はてブのアイコンフォント

はてブのアイコンフォントは以下でも公開されています。

Web Icon Fonts

Web Icon Fonts | chibatch.jp

はてブのスクエア型ロゴ

上記サイトのものを利用してもよかったのですが、素材集 – 株式会社はてなに置いてあるものと、ロゴと余白の割合が違っていたようなので、作成してみました。

SVGファイルの作成

アイコンフォントを作成するには、まずSVGファイルを作成する必要があります。

SVG 【 Scalable Vector Graphics 】
XMLベースの2Dベクター画像記述言語。 ベクター画像は画像を点の集合体ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。

SVGとは:IT用語辞典

SVGファイルを作成する方法として、以前feedlyのアイコンフォントを作成したのと全く同じ方法で行いました。

最近は、その便利さからWEBアイコンフォント(以下、アイコンフォント)を利用したサイトが増えています。アイコンフォントは、C...

上記の方法は、画像素材さえあれば、誰でも簡単にSVGファイルを作成できると思います。

画像素材は、素材集 – 株式会社はてなにある公式素材を利用させてもらいました。

SVGファイルは以下からダウンロードできます。

[wpdm_file id=11]

はてブロゴのライセンスについては、素材集 – 株式会社はてなに詳しく書いてあります。

アイコンフォントの作成

アイコンフォントの作成は、IcoMoonで行いました。

IcoMoon App - Icon Font, SVG, PDF & PNG Generator

IcoMoon App – Icon Font, SVG, PDF & PNG Generator

先程の、SVGファイルをインポートして利用すると、IcoMoon上でサイトに合うように細かな調整ができるのでいいかもしれません。

SVGファイルのインポート

今回作成したそのままのものは、以下からダウンロードできます。

[wpdm_file id=12]

大きさの調整の仕方

今回僕が作成した、アイコンフォントは、デフォルト状態でFont Awesomeのものより大きいです。

大きさを調節するには、IcoMoonのインポートボタンから

SVGファイルのインポート

配布してあるアイコンフォントフォルダ内の「selection.json」を選択してください。

selection.json

すると、以下のように表示されるので、アイコンを選択して「Generate Font」をクリックしてください。

以下の例は、LINEロゴになっていますが、アイコン編集でやることは同じです。

アイコンを選択してgenerate

あとはアイコンを選択して、

generateしたアイコンを選択

アイコンを編集画面で「スケールダウン」「スケールアップ」ボタンで大きさを調節できます。

スケールアップ・スケールダウンボタン

大きさの調節が済んだら、ダウンロードボタンから再ダウンロードすればOKです。

ダウンロードボタン

IcoMoonの使い方

IcoMoonの使い方を見るには、フォルダ内の「demo.html」のソースを見るのが最も分かりやすいと思います。

demo.html

簡単に説明すると、<head></head>内でIcoMoonのスタイルを読み込みます。

<link rel="stylesheet" href="icomoon/style.css">

あとは、HTMLで以下のように書いて利用します。

<span class="icon-hatebu"></span>

まとめ

今回作成したアイコンフォントを、以下のように利用できるようになりました。

はてブアイコンフォントが利用できるようになった

「はてブ公式素材に準じたスクエア型のはてブアイコンフォントを利用したい」なんて需要があれば、利用してみてください。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

スポンサーリンク