皆さんは制作するページにアイコンを表示したい場合、どうしていますか？
例えばPNGやGIF画像を使っている人、いるとおもいます。
もしくは「Font Awesome」のようなアイコンフォントのサービスを使って配置している人もいますよね。
アイコンフォントを使うのメリットとしてはやはり
- 色や大きさをCSSで簡単に指定し直せる
- ベクターなのでどれだけサイズを変更してもぼやけず、綺麗に表示される
でしょうか。
ただ、フリーで配信しているものを使用しようとすると使用できるデザインも限定されていて、
理想の線の太さや形状のものがなかったり、使用できるものを集めたはいいものの、全体的なイメージを統一できなかったりしますよね。
そんな時、自分の理想のアイコンフォントが作成できたらいいとおもいませんか？
これは弊社のブログのメニューに使われているHOMEのアイコンですが、
実はこれ今回紹介する「IcoMoon」で制作したものなんです。
そもそもIcoMoonって？
「IcoMoon」は、Webフォントとして扱えるアイコン素材の配布に加え、
SVGアイコンをWebフォント化することができるサービスです！
SVGデータが制作できるソフトがあれば意外と簡単にアイコンフォントを作成できますので、早速やってみましょう。
アイコンにするSVGデータを作る
IcoMoonを開く前に、今回アイコンフォントにするSVGデータを作成します。
今回はAdobe illustrator CS4を使用して作成しています。
ハロウィーンも近いので、こんな感じでカボチャのアイコンを作ろうかなと思います。
作成のポイントは以下です。
キャンバスは正方形のものを使用してください。(大きさはどのくらいでも大丈夫です。)
また、複数制作する場合でも、複数を同時に読み込めませんのでアートボードは分けてください。
あまり複雑な形状だと小さくした際に絵柄が見えにくいので、ある程度シンプルに作るのがおすすめです！
また、パスが多いとデータも重くなりますので必要ないパスはあらかじめ削除してください。
絵柄がすべて出来上がったら選択した上で、「オブジェクト」の「パス」から「パスのアウトライン」を選んで
アウトライン化してください。重なったパーツは「ウィンドウ」の「パスファインダ」から「合体」してあげます。
オブジェクトが分かれてしまっている場合は右クリックで「複合パスを作成」をして、一つのオブジェクトにしてあげてくださいね。
アウトライン化。
複合パスを作成。
・正方形のキャンバスで作成する
・アートボードは分ける
・パスは最小限で作るのがおすすめ！
・必ずアウトライン化する
・重なっているパーツ同士はパスファインダから結合する。
・離れてしまっているパーツはすべてのパーツを選択した上で複合パスを作成をする。
以上の点に注意して、データの作成が完了したら保存形式を「SVG」にして保存してください。
IcoMoonにアップロードしよう
SVGデータが無事作成できたら、いよいよIcoMoonの出番です。
まず下記のIcoMoonのサイトにアクセスします。
画面の右上に紫色で「IcoMoon App」と書いてある項目があるのでそちらをクリックします。
下の画像のようにフリーアイコンがいっぱい並んでいるページに飛ぶとおもいます。
並んでいるアイコンの上、「icomoon」の箇所に向かって先程作ったSVGデータをドラック&ドロップします。
ぽいっとすると、作成したアイコンが表示されるはずです。
上の画像の「Import Icons」からもファイルをアップできます。
4つ並んでいるアイコンメニューは、クリックすると色が変化しますので、今は何が選択されているのか確認しながら作業します。
アイコンを微調節する
次にアップロードしたアイコンを調節していきます。
アップしたはいいけど、サムネイルがなんか小さい？とおもったら、
さっきの4つのアイコンメニューの中から「編集」のマークをクリックし、アップロードしたオブジェクトをクリックします。
こんな画面がでてきますので、右から2番目のアイコンメニューからまず位置調節をします。
今回は赤枠で囲ったボタンでアイコンを画面の真ん中の位置に調整。
●が画面に対してのアイコンの配置を表しているので、下や上、他の位置にそろえたい場合はポチポチして調節してみてください。
先程のアイコンメニューのひとつ左でオブジェクトの拡縮ができます。
赤枠で囲ったアイコンではオブジェクトを画面にフィットさせることができます。
自分で微調節を加えたい場合はマイナスの四角、プラスの四角で調整ができます。
これでアイコンの調節もできましたので、
早速、出来上がったアイコンフォントをダウンロードしてみましょう！
「選択」アイコンに切り替え、ダウンロードするアイコンを選択して、画面下に出ている3つのメニューから「Generate Font」をクリックします。
このような画面がでてきます。
①では使用時に使う名前を変更できるので、複数のアイコンをダウンロードする場合など、区別できるような名前に変更してあげるといいと思います。
変更し終わったら②からアイコンフォントをダウンロードして完了です。
実際に使ってみる
ZIPファイルがダウンロードできたら、解凍してフォルダを開きます。
いろいろ中に入っていると思いますが、実際設置するために必要なファイルは
「fontsフォルダ」と「style.css」になるので、そちらを任意のフォルダへコピペして使用します。
※demo.htmlは、実際に設置するとどうなるのかのサンプルになっていますので、そちらを参考にするといいと思います。
style.cssをHTMLに読み込みます。
<link rel="stylesheet" href="common/icomoon/style.css">※パスはご自身の作業ファイルに合わせて変えてください。
ちなみにstyle.cssの中身を見るとこんな風に書いてあります。
赤枠がclass名、紫の部分はアイコンの記号になります。
これを見ると「icon-kabotya」とclassで指定した要素にアイコンがつくように書かれているので、
それを踏まえてHTMLを書くと・・・
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>IcoMoon デモ</title>
<link rel="stylesheet" href="common/icomoon/style.css">
</head>
<body>
<p>ハッピーハロウィーン！<span class="icon-kabotya"></span></p>
</body>
</html>spanの部分がアイコンになっています。
ブラウザでみるとこんな感じ。
ちゃんと表示されていますね！
先程のCSSを編集してアイコンのサイズと色も変更してみます。
.icon-kabotya:before {
content: "\e900";
color: orange;
font-size: 30px;
}
書き換えた内容でブラウザを更新↓
大きさと色もばっちり変更できました。
皆さんもこんな風にIcoMoonでオリジナルのアイコンフォントを作成して、デザインの幅を広げてみてはいかがでしょうか？
