好きなアイコンを作成し、SVG形式で保存する

こちらの記事を参考に、Illustratorでアイコンをつくりました。

まず、シンプルなハートを描き、これを活用していろいろなアイコンを作成しました。すべてSVG形式で保存していきます。

ハートふたつを使って、ロゴとして使うアイコンをつくりました。

語学カテゴリーのダイアログに使っているバルーンアイコンです。

ソーシャルボタンなどに使っているTwitterアイコンにもハートを。

これはRSS・Feedly用のアイコン。

かんたんなリボンもつくりました。

ドーナッツアイコンも作ったのですが…これは失敗。残念ながら使えませんでした。

IcoMoonでフォント化する

保存したSVG形式のファイルをアップロードするだけでフォント化してくれるジェネレーターIcoMoonを使います。

SVGファイルを用意せず、ここから好きなアイコンを選んで使うこともできます。かわいいアイコンたくさん！

オリジナルのアイコンを使う場合は、左上の「Import Icons」を押します。

保存しておいたSVGファイルをアップロードします。

アップロードしたアイコンが表示されますので、確認します。

ドーナッツはぐちゃぐちゃでした。作り方が悪いんですね…。

フォント化したいものを選び、下の「Font」ボタンを押します。

ここにはそれぞれのファイル名が表示されていますが、フォントひとつひとつに好きな文字を割り当てることもできます。わたしはこのまま変更していません（後述）。

割り当てが終わったら、下の「Download」ボタンを押します。

ダウンロードされたicomoon.zipを解凍します。

使うのはfontsフォルダとstyle.cssです。

fontsフォルダの中身です。

フォントデータをサーバーにアップロードする

フォントデータの入ったfontsフォルダを、サーバーの好きな場所へアップロードします。

CSSの内容を追記する

icomoonフォルダ内のstyle.cssを開き、中身をコピーし、自分のWebサイトで適用しているCSSファイル（WordPressならテーマフォルダ内のstyle.css）に追記します。

なお、フォントファイルのパス（3～7行目）はfontsフォルダをアップロードした場所に書き換える必要があります。

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

アイコンのマークアップ（使い方）

アイコンの基本的な使い方については、こちらの記事で詳しく解説されています（前半はIcoMoonの使い方なので、マークアップに関しては記事の後半です）。

わたしはWordPressテーマのPHPファイルを書き換える（クラス名を追記する）のが面倒なので、IcoMoonが割り当ててくれているセレクタは使用していません。

icomoonフォルダ内のstyle.css（の一部）

.icon-twitter:before {
     content: "\e602";
}
.icon-rss:before {
     content: "\e604";
}
.icon-ribbon:before {
     content: "\e605";
}
/*以下省略*/

例えば記事見出し（H2）の前にリボンアイコンを表示させる場合、以下のようにHTMLにクラス名を追記していけば良いのですが、これが面倒なので…

<h2 class="icon-ribbon">見出し</h2>

HTMLには変更を加えずCSSに変更を加えて、アイコンフォントを表示させています。

先ほどの content: “\e604″; の部分をコピーして、こんなふうに使っています。

h2:before{
    content: "\e604";
    font-family:"icomoon";
    /*あとは色の指定などなど*/
}

使い方はなんでもいいのだと思います。ほんとはクラス名を追記する方法のほうがスマートでしょうか。

さいごに

アイコンフォントなら画像と違って色や大きさを自在に変えられるのでとっても便利です。

こんなに大きくしても

きれいに表示されます！

以上、かんたんですが、アイコンフォント自作のメモでした。Illustratorをもうちょっと使えるようになったら、ドーナッツ型のアイコンに再挑戦したいです。