前回、LINEのスクエア型アイコンフォントを作成しました。
一応そのとき、はてブのスクエア型アイコンフォントも作成したので載せておきます。
以下のようなアイコンフォントが利用できます。
photo by saksan
目次
はてブのアイコンフォント
はてブのアイコンフォントは以下でも公開されています。
上記サイトのものを利用してもよかったのですが、素材集 – 株式会社はてなに置いてあるものと、ロゴと余白の割合が違っていたようなので、作成してみました。
SVGファイルの作成
アイコンフォントを作成するには、まずSVGファイルを作成する必要があります。
SVG 【 Scalable Vector Graphics 】
XMLベースの2Dベクター画像記述言語。 ベクター画像は画像を点の集合体ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。
SVGファイルを作成する方法として、以前feedlyのアイコンフォントを作成したのと全く同じ方法で行いました。
上記の方法は、画像素材さえあれば、誰でも簡単にSVGファイルを作成できると思います。
画像素材は、素材集 – 株式会社はてなにある公式素材を利用させてもらいました。
SVGファイルは以下からダウンロードできます。
[wpdm_file id=11]
はてブロゴのライセンスについては、素材集 – 株式会社はてなに詳しく書いてあります。
アイコンフォントの作成
アイコンフォントの作成は、IcoMoonで行いました。
IcoMoon App – Icon Font, SVG, PDF & PNG Generator
先程の、SVGファイルをインポートして利用すると、IcoMoon上でサイトに合うように細かな調整ができるのでいいかもしれません。
今回作成したそのままのものは、以下からダウンロードできます。
[wpdm_file id=12]
大きさの調整の仕方
今回僕が作成した、アイコンフォントは、デフォルト状態でFont Awesomeのものより大きいです。
大きさを調節するには、IcoMoonのインポートボタンから
配布してあるアイコンフォントフォルダ内の「selection.json」を選択してください。
すると、以下のように表示されるので、アイコンを選択して「Generate Font」をクリックしてください。
以下の例は、LINEロゴになっていますが、アイコン編集でやることは同じです。
あとはアイコンを選択して、
アイコンを編集画面で「スケールダウン」「スケールアップ」ボタンで大きさを調節できます。
大きさの調節が済んだら、ダウンロードボタンから再ダウンロードすればOKです。
IcoMoonの使い方
IcoMoonの使い方を見るには、フォルダ内の「demo.html」のソースを見るのが最も分かりやすいと思います。
簡単に説明すると、<head></head>内でIcoMoonのスタイルを読み込みます。
<link rel="stylesheet" href="icomoon/style.css">
あとは、HTMLで以下のように書いて利用します。
<span class="icon-hatebu"></span>
まとめ
今回作成したアイコンフォントを、以下のように利用できるようになりました。
「はてブ公式素材に準じたスクエア型のはてブアイコンフォントを利用したい」なんて需要があれば、利用してみてください。
