Font Awesomeの感覚でストロークアイコンが使えるWebアイコンフォント Pe-icon-7-stroke

はじめに

Web Font Awesomeを良く使っていますが便利ですよね。アイコンの量（519）も多いし、アップデートも定期的に行われています。ただ、最近の流行に合わせて使おうと思うと塗りが多くて少し重いんですよね。

そんな時に見つけたのがpixedenが提供しているPe-icon-7-strokeというWebアイコンフォントです。アイコンの種類はFont Awesomeと比べると半分以下（202）ですが品の良いストロークアイコンがセットになっています。使い勝手もFont Awesomeと近いので学習コストも低いです。

アイコンの種類

分類等はされていませんが、アイコンの検索はできるようになっています。（アイコンを探す）アイコンの一覧がこちら。

ダウンロード

Pe-icon-7-strokeをダウンロード
まずはファイルをダウンロードしましょう。登録の必要も無く、そのままダウンロードできます。Zipファイルを解凍するとソースファイルとドキュメント、コンパイル後のデータが一緒になっています。実際にサイトで使うにはpe-icon-7-strokeフォルダの中身だけで十分です。デザインに使いたい場合はSVGフォルダにすべてのアイコンの元データが入っています。

使い方

pe-icon-7-strokeフォルダの中身を適当に保存し、pe-icon-7-stroke.cssとhelper.cssを読み込みます。helper.cssはFont Awesomeで言うところのサイズ変更や角度変更、回転をするためのクラスが含まれているファイルです。Pe-icon-7-strokeのドキュメントを見ればわかると思いますが、ほぼFont Awesomeと同じです。

CSSの読み込み

<link rel="stylesheet" href="path/to/pe-icon-7-stroke/css/pe-icon-7-stroke.css">

<!-- Optional - Adds useful class to manipulate icon font display -->
<link rel="stylesheet" href="path/to/pe-icon-7-stroke/css/helper.css">

HTML

アイコンの指定はspanまたはiで指定できます。

<span class="pe-7s-map-marker"></span> pe-7s-map-marker
<i class="pe-7s-home"></i> pe-7s-home

拡大や回転はFont Awesomeと同じでHelperのクラスを追加で指定します。

<p><i class="pe-7s-map-marker pe-lg pe-va"></i> pe-7s-map-marker</p>
<p><i class="pe-7s-map-marker pe-2x pe-va"></i> pe-7s-map-marker</p>
<p><i class="pe-7s-map-marker pe-3x pe-va"></i> pe-7s-map-marker</p>
<p><i class="pe-7s-map-marker pe-4x pe-va"></i> pe-7s-map-marker</p>
<p><i class="pe-7s-map-marker pe-5x pe-va"></i> pe-7s-map-marker</p>

IcoMoon Appへのインポート

ベクターアイコン管理にとても便利なIcoMoon Appにインポートすることもできます。インポート方法はIcoMoonのManage ProjectからImport Projectを選択し、Pe-icon-7-strokeからダウンロードしたicomoonフォルダにあるselection.jsonをアップロードします。作られたプロジェクトにPe-icon-7-strokeのアイコンがインポートされます。

その他のStrokeアイコン

有料（$49）ではありますが、IcoMoonが提供しているLineariconsも完成度が高く便利そうです。ソースファイルの豊富で10人までのプロジェクトメンバーへのライセンス共有、アップデートも無料です。コスパは良い気がします。

Font Awesomeのメンバーが作ったWebアイコンフォントを簡単に作れるサービス fonticons（beta）

数週間前ぐらい前にFont Awesomeのメンバーが開発したfonticonsというサービスがリリースされました。Font Awesomeのアイコンセットをベースに、必要なアイコンだけをセットにした独自のWebアイコンフォントを作ることができます。SVGをアップロードすることで、カスタムアイコンも追加可能です。

Webアイコンフォントを自作する

IcoMoonもfonticonsも便利ではありますが、それなりに使おうと思うと課金が必要です。毎月数ドルだとしても、年で考えると馬鹿になりません。そんな時はGulp.jsで自作してしまいましょう。

これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化

最近ではビットマップ形式のアイコンは本当に使わなくなりました。ベクター形式は楽で良いですね。次はSVGかな。以上、ストロークアイコンが使えるWebアイコンフォントの紹介でした。