自作のWEBアイコンフォントの作り方（無料ツールのみでfeedlyフォントを作る）

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

アイコンフォントは、CSSで色や大きさを指定出来るし、画像と違い大きさが変わったからといって、表示が粗くなるといったこともなく本当に便利です。

僕の使用しているWordpressテーマでも、Font AwesomeのWEBフォントを使用しています。このフォントがまた、種類も機能も豊富でとても使いやすいです。ただ、そんな便利なFont AwesomeのWEBフォントなんですけど、1つだけ不満に思うことがあります。

それは、feedlyのアイコンフォントがないことです。FacebookやTwitterなど、WEB上でよく見かけるロゴのアイコンはあるんですけど、feedlyのものはありません。その他のアイコンフォント配布サイトでも見つけることができませんでした。

そこで、無いのならしょうがないということで、自分で作ってみることにしました。

ということで今回は、画像ツールとか使い慣れていない僕が、なるべく面倒なことを避けながらWEBアイコンフォントを作った過程について書きたいと思います。作成したものは、最後でダウンロードできるようになっているので、よろしかったらお使いください。

WEBアイコンフォントを作る主な手順

さて、アイコンフォントを作るといっても、いろいろな方法があります。

僕も調べてみて、いろいろな方法があるのを知りました。けれどそのほとんどの方法がIllustratorという個人で使うにしては少し値段が高めのソフトを使ったものでした。しかしそんな中でも、「高額なソフトを買う必要もなく、なるべく簡単に作れる方法」を模索してみたら、何とか作ることができたので、その方法を紹介したいと思います。

主な手順は以下です。

1. アイコンフォントのデザインを画像で作る
2. SVG画像を作成する
3. SVG画像からアイコンフォントを作成する
4. アイコンフォントをサイトで使用する

この手順を使用することで、僕の様な素人でも、WEBフォントを、まあまあ手軽に作れるようになりました。

今回は例として、feedlyのWEBフォントを作りたいと思います。詳しい手順については、以下で説明していきます。

アイコンフォントのデザインを画像で作る

まずは、アイコンフォントのデザインを考えます。

参考とするアイコンフォント

デザインについては、このサイトテーマでも使用しているFont Awesomeに寄せて作りたいので、似たようなデザインしようと思います。ですので、fa-twitter-squareとfa-twitterみたいな感じで、feedlyのアイコンフォントを作りたいと思います。

利用する画像

feedlyのロゴとかを自分で書くのが面倒なので、feedly公式のFeedly buttonで配布されている以下の画像ボタンを加工して作成したいと思います。

画像ボタンを加工してデザインを作成

上記の画像ボタンをGIMPで加工して、以下のようなPNG画像を作成しました。

• 大きさは、240×240pxの正方形（好きなサイズでOK）
• 角を丸めるのはGIMPの「フィルタ→装飾→角丸め」を使用
• 角丸めの割合はFont Awesomeのが10:1くらいだったので240:24にする
• 枠つきのものを反転して、枠なしのものを作成

枠なしのものは、多少小さいような気もしますが、後で何とかします。

SVG画像を作成する

とりあえずデザインは完成したので、次はSVG画像を作成します。

使用するソフト

僕が、作成手順を調べていて1番の難関はここでした。というのも、ネットにある情報のほとんどは、SVG画像を作成するのにAdobeのIllustratorを使用する方法だったからです。ちなみに、Amazonで最新版のIllustratorの値段を見てみたら、12ヶ月版で2万6000円ぐらいでした。さすがに、このアイコンフォントを作るだけで、そんな高いソフトを買う気にはならないので、何か良い無料ソフトはないかと探してみることにしました。

で、無料でSVG画像を扱えるソフト探していたら、Inkscapeというフリーソフトがあったので、それを使うことにしました。僕はそれのWindows 64bit版をPartha’s Placeからダウンロードしてインストールしました。

Inkscapeのインストール

Inkscapeのインストールは、最初に日本語を選んでしまえば、あとは「次へ」を押していけばOKだと思います。

SVG画像の作成

SVG画像の作成は、本来ならパスを利用して描いていくのが一番なんでしょうけど、僕は面倒くさいので、画像からSVGに変換することにしました。（パスで描いた方が綺麗にできるし、多分サイズは小さくなります。綺麗なものは、どなたかプロお願いします！）

キャンバスのサイズ変更

まず、Inkscapeを起動したら、こんな感じにA4サイズのキャンバスが表示されます。

今回作成するのは、240×240pxのサイズなのでキャンバスの大きさを変更します。

キャンバスの大きさを変更するには、メニューから「ファイル→ドキュメントの設定」を選択します。

カスタムサイズの幅と高さを240pxに設定しました。

あとは「表示→ズーム」などからキャンバスが好みの大きさに表示されるように調整してください。僕の場合は、こんな感じの表示になりました。

PNG画像からパスを作成

この画面上に、先程作成したPNG画像をドロップします。何か警告が出るかもしれませんが「埋め込み」を選択してOKボタンを押しましょう。

画像ドロップするとこんな感じになります。

このままだと、ただ単にPNG画像を埋め込んだだけなので、このPNG画像からトレースしてパスを作成します。

パスを作成する方法は、メインメニューの「パス→ビットマップをトレース」を選択します。

すると次のようなダイアログが表示されるので、「モード」タブの「単一スキャン」や「多重スキャン」のオプションを、いろいろ選択しながら「更新」ボタンを押してみてください。多分どれでも、ある程度はいけると思います。

すると、以下のようにトレース後の状態がプレビューに表示されるので、中でも最も綺麗に表示されるオプションを選択して「OK」ボタンを押してください。（大抵は「明るさの境界」でOKな気がします。）

ビットマップのトレース後、ロゴマークをドラッグしてずらすと、上に「パスで作成されたオブジェクト」が重なっています。

パスのオブジェクトを作ってしまうと、PNGオブジェクトは必要なくなるので削除してください。（削除しないと完成品が重くなる）

オブジェクトを中心に

あとは、ビットマップトレースして作ったオブジェクトを中心に持ってきます。

オブジェクトを中心に配置するには、メインメニューの「オブジェクト→整列と配置」を選択してください。

すると、以下のようなパネルが表示されるので、以下の手順を実行してください。

1. 「基準」を「ページ」にする
2. 「左端で揃える」ボタンを押す
3. 「右端で揃える」ボタンを押す

すると、こんな感じでオブジェクトがキャンバスにピタリと合います。

SVGファイルの書き出し

あとは、メインメニューの「ファイル→保存（名前を付けて保存でもOK）」でSVGファイルで保存します。

もう一方の、PNG画像もこのようにしてSVG画像に変換します。

（もう一方の「オブジェクトの整列」は中央揃えを使ったほうがいいかも。）

WEBアイコンフォントの作成

アイコンフォントを作るには、IcoMoonというWEBサービスを使用します。

IcoMoonは、SVG形式のアイコンデータをアップロードするだけで、自作のオリジナルアイコンを作成・編集できる、とても便利なサービスです。

その他にも、「IcoMoon」「Font Awesome」「Iconic」「Meteocons」「Broccolidry」などのアイコンフォントが揃っていて、その中から使いたいものだけを選んでオリジナルのWEBアイコンフォントセットを作成することも出来てしまいます。

IcoMoonでフォントの作成

まずは、ページ上部にある「Import Icons」をクリックします。

アップロードのためのダイアログが表示されるので、そこで先程作成した、2つのSVGファイルを選択します。

すると、IcoMoonではこのように表示されます。

次に使用するアイコンフォントを選択します。

今回は、作成したものしか使わないのでアップロードした2つのアイコンしか使用しません。

選択を終えたら、「Font」ボタンを押してください。

すると、アイコンの確認画面が表示されます。アイコンフォントのちょっとした編集は、アイコンフォントをクリックすることで、ここから行うことができます。

枠なしの「feedly」アイコンが少し小さいようなので、ここで大きくしてみます。

編集対象のアイコンをクリックすることで、編集画面になります。

このような感じで、アイコンを、スケールアップしたり、回転させたり、上下左右を反転させたり、移動したりすることができます。

最後に、「Download」ボタンを押すと、作成されたWEBアイコンフォントがダウンロードされます。

アイコンフォント作成サイトは、その他にIconVaultなんてのもあります。こちらも簡単にアイコンフォントを作成することができます。

WEBアイコンフォントをサイトで使用する

ダウンロードしたファイルを解凍すると以下のようになっています。

作成されたもの

この中の、「fontsフォルダ」と「style.css」のみを使用します。

「fontsフォルダ」にはWEBアイコンフォント用のファイルが入っていて、「style.css」には、それを使用するためのスタイルが書かれています。

style.cssにはこのように書かれています。

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

[class^="icon-"], [class*=" icon-"] {
    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;
}

.icon-feedly:before {
    content: "\e600";
}
.icon-feedly-square:before {
    content: "\e601";
}

使い方

使い方は、ダウンロードファイルの中にある「demo.html」を見れば分かります。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>IcoMoon Demo</title>
    <meta name="description" content="An Icon Font Generated By IcoMoon.io">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="demo-files/demo.css">
    <link rel="stylesheet" href="style.css"></head>
<body>
    <div class="bgc1 clearfix">
        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;2)</small></h1>
    </div>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn bshadow fgc1">Grid Size: Unknown</h1>
        <div class="glyph fs1">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-feedly"></span><span class="mls"> icon-feedly</span>
            </div>
            <fieldset class="fs0 size1of1 clearfix hidden-false">
                <input type="text" readonly value="e600" class="unit size1of2" />
                <input type="text" maxlength="1" readonly value="&#xe600;" class="unitRight size1of2 talign-right" />
            </fieldset>
            <div class="fs0 bshadow0 clearfix hidden-true">
                <span class="unit pvs fgc1">liga: </span>
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
        <div class="glyph fs1">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-feedly-square"></span><span class="mls"> icon-feedly-square</span>
            </div>
            <fieldset class="fs0 size1of1 clearfix hidden-false">
                <input type="text" readonly value="e601" class="unit size1of2" />
                <input type="text" maxlength="1" readonly value="&#xe601;" class="unitRight size1of2 talign-right" />
            </fieldset>
            <div class="fs0 bshadow0 clearfix hidden-true">
                <span class="unit pvs fgc1">liga: </span>
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
    </div>

    <!--[if gt IE 8]><!-->
    <div class="mhl clearfix mbl">
        <h1>Font Test Drive</h1>
        <label>
            Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
            min="8" value="48" />
            px
        </label>
        <input id="testText" type="text" class="phl size1of1 mvl"
        placeholder="Type some text to test..." value=""/>
        </label>
        <div id="testDrive" class="icon-">&nbsp;
        </div>
    </div>
    <!--<![endif]-->
    <div class="bgc1 clearfix">
        <p class="mhl">Generated by <a href="http://icomoon.io/app">IcoMoon</a></p>
    </div>

    <script src="demo-files/demo.js"></script>
</body>
</html>

ヘッダー部分でスタイルを以下のように呼び出し、

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

使用時は、こんな感じで呼び出します。

<span class="icon-feedly-square"></span>

すると、こんな感じでHTMLで利用することができます。（デモページ）

実際のWEBアイコンフォント

実際に作成したアイコンフォントがこちら。

240px icon-feedly-square

240px icon-feedly

思ったより綺麗にできています。

ダウンロード

今回作成したものを以下に置いておきます。純粋に、パスを使って描いたものではないので多少粗いですが、それでも良かったら自由にお使いください。

feedlyのWEBアイコンフォント

IcoMoonで作成したWEBアイコンフォントです。

[wpdm_file id=1]

※僕の作ったfeedlyアイコンフォントは、Font Awesomeのものより少し大きく表示されてしまいます。もっと余白を持って作らなければいけなかったのかもしれません。使用するときは、サイトをFont Awesomeのものの85％にすると、大体同じくらいのサイズで表示されます。どなたか、同じようなサイズで作れた場合は、教えていただけると幸いです。

その他

あと、今回いろいろ試した中で、いろんなfeedly画像を作成したので、それも置いておきます。

大きなfeedlyPNG透過画像いろいろ

1000×1000pxです。

SVGファイル

1000×1000pxのfeedly枠つきSVGファイル

1000×1000pxのfeedly枠なしSVGファイル

まとめ

今回ようやく、念願のfeedly WEBアイコンフォントを手に入れることができました。

これで今まで、画像を利用していたSimplicityテーマのfeedlyアイコンを、アイコンフォントにすることができるようになりました。

こういったアイコンフォントを、無料で作れるツールがあるのは本当に助かります。