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

original-font-making-icomoon-
Update

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

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

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

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

01-icon-svg-heart

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

02-icon-svg-heart-logo

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

03-icon-svg-balloon

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

05-icon-svg-twitter

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

06-icon-svg-rss

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

04-icon-svg-ribbon

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

07-icon-svg-donut

IcoMoonでフォント化する

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

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

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

08-icomoon-app

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

09-icomoon-app-import

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

10-icomoon-import

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

07-2

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

11-icomoon-select

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

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

12-icomoon-rename

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

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

13-icomoon-folder

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にクラス名を追記していけば良いのですが、これが面倒なので…

見出し

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

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

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

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

さいごに

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

こんなに大きくしても

きれいに表示されます!

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