アイコンフォントをもっと便利に使おう

iconfonts

こんにちは、UIデザイナーのタカムラです。

今更ですが、アイコンフォントって便利ですよね。
色やサイズの変更で画像を切り直す必要がなく、レスポンシブデザインとの相性も良いです。
最近目にする機会が多いのではないでしょうか。

例えば Bootstrap では標準で Glyphicons が使用できますし、Font Awesome も手軽に気の利いたアイコンフォントを導入できます。

ただ、アイコンセット内にどうしても欲しいアイコンが見つからない場合があります。
そんな時は自分でアイコンをさくっと追加してみましょう。

アイコンを追加してみよう

別のアイコンセットを追加するという手もありますが、そうすると同じようなアイコンが大量に重複してしまいます。
ですので、今回はピンポイントで欲しいアイコンのみ追加する方法をご紹介します。

1. 欲しいアイコンを探す

商用利用可能かつハイクオリティなアイコンを配布しているサイトは色々とありますが、私のおすすめは iconmonstr です。

ポイントは

豊富なアイコンがカテゴリごとに分けられているので目的のアイコンが探しやすい
ライセンスにあるようアイコン50個まではフォントに埋め込んだり、サードパーティのツールでWebフォントとして生成可能

といった点です。

ここで、欲しいアイコンを見つけ「SVG」形式を選択してダウンロードします。

2. フォントファイルを生成する

アイコンのSVGファイルがピックアップできたら、フォントファイルとCSSを生成しましょう。

これもいろいろなやり方・サービスがありますが、今回は IcoMoon を使います。
生成ツールはページ上部にある「IcoMoon App」からアクセスできます。

ツールページの上部の「Import Icons」ボタンから先ほどダウンロードしたSVGファイルを読み込んだら、忘れずにそのアイコンを選択します。

icomoon_select

そしてページ下部の「Generate Font」から、確認＆詳細設定画面に進みます。
ここではフォント名やクラスの Prefix、CSS セレクタの種類などを設定します。
一通り終わったらダウンロードしましょう。

3. アイコンフォントを使う準備をする

ダウンロードしたファイル群の中で重要なのは

/fonts
/style.css

です。

「fonts」フォルダごとプロジェクトの好きな場所に配置し、CSS 内のフォントに対するパスを合わせれば準備完了。これで好きなアイコンフォントを使用できるようになりました。

<style>
@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?-hoge');
	src:url('fonts/icomoon.eot?#iefix-hoge') format('embedded-opentype'),
		url('fonts/icomoon.woff?-hoge') format('woff'),
		url('fonts/icomoon.ttf?-hoge') format('truetype'),
		url('fonts/icomoon.svg?-hoge#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

i {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.im-clipboard:before {
	content: "\e615";
}
</style>


<!-- 表示したいアイコンフォント -->
<i class="im-clipboard"></i>

<style>

@font-face {

font-family: 'icomoon';

src:url('fonts/icomoon.eot?-hoge');

src:url('fonts/icomoon.eot?#iefix-hoge') format('embedded-opentype'),

url('fonts/icomoon.woff?-hoge') format('woff'),

url('fonts/icomoon.ttf?-hoge') format('truetype'),

url('fonts/icomoon.svg?-hoge#icomoon') format('svg');

font-weight: normal;

font-style: normal;

}

i {

font-family: 'icomoon';

speak: none;

font-style: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

line-height: 1;

/* Better Font Rendering =========== */

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.im-clipboard:before {

content: "\e615";

}

</style>

あとは上記のような感じで表示するだけです。

まとめ

細かい点は端折りましたが、大まかな流れとしてはこんな感じです。
アイコンフォントを使ったことがある人であれば、簡単にできると思います。

ハイクオリティなアイコンフォントをガンガン使って、軽量かつ効率的なUIライフを楽しみましょう！