先日、サイトロゴをアイコンフォント化する方法を紹介しました。
これを書いている途中に、「自分の似顔絵イラストなんかで、アイコンフォントを作ったら汎用性が高くていいんじゃないか？」と思って、試してみたらうまくいきました。
今回試しに作ってみたアイコンフォントが以下です。
慣れると、1つ5分ぐらいで作成できます。
というわけで今回は、画像から上記のような、アイコンフォントを無料ツールのみを使って作成する方法を紹介します。
目次
主な手順
画像などから、アイコンフォントを作成する主な手順は以下です。
- 画像を準備する
- JTrimで白黒画像（2階調化）にする
- Inkscapeを使ってSVG化する
- IcoMoonを使ってアイコンフォント化する
だいたいこんな手順で、どんな画像もアイコンフォント化することができます。
一つ一つ行っていけば、どれも単純作業ですし、利用するツールも無料なので誰にでも作れると思います。
画像を準備する
まずは画像を準備します。
今回は例として、僕が利用しているTwitterのアイコンを利用します。
Twitterアイコンのデフォルトの拡張子はPNGですが、画像ソフトでJPGで保存して、JPEG画像を使用したほうがいいかもしれません。（この後使うJTrimでPNGだと意味もなく透過になってしまったため）
JTrimで白黒画像化（2階調化）にする
僕はWindowsを使用しているので、今回はJTrimを使った方法を紹介します。（Macなどでも、同様の編集ができるソフトはあると思います。）
で、用意した画像をJTrimで開きます。
次に、「カラー」メニューから「2階調化」を選択します。
すると、以下のようなダイアログが表示されるので、「境界のしきい値」好みに好みに調整してください。
「OK」ボタンを押すと以下のようになります。
これで、以下のような画像を作成しました。
プロフィール写真などで作成する場合は、うまく白黒化（2階調化）できないかもしれません。そういった場合は、JTrimのメニューの「カラー」にある「明るさ/コントラスト」からコントラストの調整をしてから2階調化してみてください。
Inkscapeを使ってSVG化する
次に、作成した画像をInkscapeというベクトル画像を作成できる無料ツールを使ってSVG化します。
まずは、Download | Inkscapeから環境にあった、ファイルをダウンロードしてください。
僕は、Windowsなので、Windows版の64bit用のものをダウンロードしました。
Inkscapeを起動すると以下のようになります。
まずは、キャンバスの大きさを設定します。
メインメニューの「ファイル」から「ドキュメントのプロパティ」を選択します。
すると、「ドキュメントのプロパティダイアログ」が表示されるので、「単位」を「px」にして、「幅と高さ」を「300」にします。
すると、以下のようにキャンバスの大きさが変更されます。（大きさはズームなどを利用して調節します。）
Inkscapeの作業エリアに、先程2階調化した画像をドラッグ＆ドロップします。
すると以下のような「PNGビットマップ画像のインポート」ダイアログが表示されますが、デフォルトの状態で「OK」ボタンを押します。
すると、以下のように画像が読み込まれます。
ツールボタンの「矢印マーク」をクリックして、画像をクリックすると、以下のように画像の大きさを変化できるハンドルが表示されます。
画像の大きさを調節して、以下のようにキャンバスの大きさに合わせます。（Ctrlボタンを押したままドラッグするとアスペクト比を保ったまま大きさを変更できます。）
次に、画像を選択したままメインメニューの「パス」から「ビットマップのトレース」を選択します。
すると「ビットマップのトレース」ダイアログが表示されるので、デフォルトの設定のまま「更新」ボタン押して、「OK」ボタンを押してください。
これで、トレースが完了したので、以下のように表示されます。この状態で2枚重なっています。
上のレイヤーをドラッグ＆ドロップして横にずらすと、下にもう一枚表示されるので、下にある方を選択してそちらを削除します。（画像が入っていると重いので）
削除するとこんな感じになります。
あとは以下のように、ドラッグ＆ドロップなどでキャンバス内に収めてください。
オブジェクトを選択した状態で、メインメニューの「オブジェクト」から「整列と配置」を選択すると
すると、以下のような整列パネルが表示されるので、手軽に中央ぞろえなどを行うことができます。
最後に、メインメニューの「ファイル」から「保存」を選択してファイルを保存します。
保存時「ファイルの種類」は、SVGファイルで行ってください。
これで以下のようなSVGの画像ファイルが作成されました。
IcoMoonを使ってアイコンフォント化する
最後に、IcoMoonを利用してSVGファイルをアイコンフォント化します。
IcoMoonに移動すると、以下のような画面が表示されるので、上の方にある「Import Icons」をクリックします。
すると、ダイアログが表示されるので、先程作成したSVGファイルをインポート後、読み込まれたアイコンを選択します。
そして、画面下の方にある「Generate Font」リンクをクリックします。
すると、以下のようなフォントの修正画面になります。修正が終わる、もしくは修正の必要がない場合は「Download」ボタンを押してファイルをダウンロードしてください。
「icomoon.zip」というファイルがダウンロードされアイコンフォントが作成できました。
作成したアイコンフォントの使い方
あとは、IcoMoonで作成したアイコンフォントのWordpressでの使い方を一応説明しておきます。
アイコンフォントファイルの設置
先程ダウンロードした「icomoon.zip」を解凍して、フォルダ名を「face-icons」とでもしておきます。
このフォルダをテーマ（子テーマ）フォルダ直下にコピーします。
テンプレートファイルから呼び出す
あとは、テーマの<head></head>があるテンプレートファイルから以下のようにスタイルシートを呼び出します。
<!-- 子テーマで呼び出す場合 --> <link href="<?php echo get_stylesheet_directory_uri(); ?>/face-icons/style.css" rel="stylesheet"> <!-- 親テーマで呼び出す場合 --> <!-- <link href="<?php echo get_template_directory_uri(); ?>/face-icons/style.css" rel="stylesheet"> -->
アイコンフォントを利用する
あとは、ロゴで作成したアイコンフォントを表示させたい場所に、以下のようなHTMLタグを書きます。
イラストで作成
<span class="icon-face" style="font-size:100px;"></span>
どうも<a href="https://twitter.com/MrYhira"><span class="icon-face" style="font-size:30px;"></span></a>です。
猫の写真で作成
<span class="icon-cat" style="font-size:150px;color:#4B474D;"></span>
顔写真で作成
<span class="icon-cat" style="font-size:1400px;color:#4B474D;"></span>
ちょっと工夫すればこんな使い方もできます。
まとめ
無料で使えるJTrim、Inkscape、IcoMoonで、画像からアイコンフォントを作成することができます。
ベクター画像編集ツールで、自前で絵を描いて作るよりは、かなり手軽に作れるのではないかと思います。
また利用する場合は、同じTwitterへのリンクでも@MrYhiraのようにIDよりは、今回の方法のようにイメージの方が、憶えてもらえる可能性が多少は高いかもしれません
