アイコンフォント(Webフォント)自作のメモ

original-font-making-icomoon-
Update

ハートだらけのアイコンフォント(Webフォント)を自作してみました。作成・使用の手順と参考にした記事についてのメモです。

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

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

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

01 icon svg heart1

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

02 icon svg heart logo

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

03 icon svg balloon1

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

05 icon svg twitter1

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

06 icon svg rss1

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

04 icon svg ribbon1

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

07 icon svg donut1

IcoMoonでフォント化する

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

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

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

08 icomoon app 600x331

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

09 icomoon app import 600x319

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

10 icomoon import 600x317

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

07 2

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

11 icomoon select 600x317

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

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

12 icomoon rename 600x333

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

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

13 icomoon folder 600x250

fontsフォルダの中身です。

14 icomoon fonts folder

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

フォントデータの入った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をもうちょっと使えるようになったら、ドーナッツ型のアイコンに再挑戦したいです。