Webフォントとして使用できるアイコンは非常に便利ですよね。
当ブログでもご紹介しました「Font Awesome」
非常に便利ですが、使いたいアイコンがここにはない
という場合があると思います。
そんなときは自分で理想のWebフォントのアイコンを作ってみましょう。
今回はその作り方をご紹介します。
- 国内シェアNo.1の高速サーバーなのでストレスフリー！
- 自動バックアップ機能に標準対応で安心運用可能！
| 気になるポイント！ | キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！ |
|---|
アイコンを作る手順
アイコンを自作する手順としては、
１．アイコンの元となる画像を用意または作成する
２．画像をSVGファイルに変換する。
３．icomoonでアイコンをWebフォント化する
４．Webフォントを導入する
という流れです。
アイコンの元となる画像を用意または作成する
アイコンを自作するためには、
元となる画像を用意しなければなりません。
アイコンの画像を作成するほどの技術はないので、
今回は無料のサイトから拾ってきた以下の画像を、
アイコンにしたいと思います。
画像をSVGファイルに変換する
アイコンをWebフォント化するためには、
JPEGやPNGの画像をSVGという拡張子に変換しなければなりません。
ネット上でアイコンの自作の方法を調べると、
「Illustrator」というソフトを使用している方法が多いです。
このIllustrator・・・
名前は聞いたことあるけど、有料では？と思い値段を調べると、
なんてことでしょう！
ひと月2,000円以上するではありませんか。
もともとIllustratorを使っている人ならいいですが、
アイコン作るだけなのにこんな出費するくらいなら、
作らないほうがまし！
と思ったので、これに代わるソフトを探してみると、
「Inkscape」というソフトが見つかりました。
今回はこちらのソフトを使用します。
まずはInkscapeを起動すると、
A4サイズのキャンバスが表示されています。
画像を読み込む
この状態で
ファイル＞インポート
で今回作成する画像を読み込みましょう。
「埋め込み」がどうたらと表示されますが、
気にせずOKで大丈夫です。
キャンバスサイズを変更する
お次は、キャンバスのサイズを正方形にします。
サイズの変更は、
ファイル＞ドキュメントのプロパティ＞ページ＞カスタムサイズ
で変更できます。
なお赤で囲ってある「単位」の部分は「px」に変更してください。
こちらで設定するサイズは、
使用する画像の大きい長さに合わせてください。
今回使用する画像は500pxなので、
キャンパスサイズを500pxの正方形にします。
画像をパスに変更する
キャンバスサイズの設定が終わったら
画像をトレースして、パスを作成します。
パスの作成は、
パス＞ビットマップをトレース
からすることができます。
「ビットマップをトレース」をクリックすると、
以下のようなダイアログが表示されます。
さまざまなオプションがありますが、
おそらく、「明るさの境界」で大丈夫だと思います。
（いろいろと試してみてください）
そしてOKを押すとパスで作成された使用するアイコンが、
元の画像に重なっているので、画像をずらしてみてください。
このようになります。
（緑色が元の画像です）
元の画像はもう使用しないので、
削除してしまいましょう。
パス化したアイコンを、
キャンバスに合わせれば完成です。
アイコンをキャンバスに合わせる際には、
オブジェクト＞整列と配置
にて「基準」を「ページ」にして、
中心を合わせると楽にすることができます。
ここまでできたら、
ファイル＞名前を付けて保存
から、ファイルの種類を「SVG」にして保存すれば完成です。
icomoonでアイコンをWebフォント化する
先ほど作成したアイコンを、
「icomoon」という無料サービスを利用して、
webフォント化します。
上記のリンクからアクセスしたページの左上あたりに、
「import icons」というところがあるので、
ここをクリックし、先ほど作成したアイコンのファイルを選択してください。
ファイルを選択すると、
以下のように、作成したアイコンが表示されます。
そのアイコンを選択した状態で、
右下の「Generate Font」をクリックします。
するとこのような画面が表示されます。
こちらでは、アイコンの大きさや、
アイコン名を変更することができるので、
いろいろお試しください。
特に問題がない場合は、右下のダウンロードをクリックすれば、
これでzipファイルをダウンロードすることができます。
Webフォントを導入する
ダウンロードしたzipファイルを開くとこのようになります。
このファイルのうち使用するファイルは、
「fonts」のフォルダおよび「style.css」の内容です。
fontsのフォルダをftpソフトを使用してアップロードする
まずfontsのフォルダをftpソフトを使用して、
アイコンを使用したいサイトのフォルダに追加します。
ちなみにfontsのフォルダの中には、拡張子の異なるファイルが４つありますが、
これらのファイルすべてアップロードすることになります。
アップロードをする場所は、
使用するサイトの「style.css」のファイルと同じ階層にしてください。
style.cssに追記する
先ほどダウンロードしたフォルダの中にあるstyle.cssのファイルを開いてください。
ちなみに私が作成したアイコンの場合は、
以下の通りの内容になっています。
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?ps41xx');
src: url('fonts/icomoon.eot?ps41xx#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?ps41xx') format('truetype'),
url('fonts/icomoon.woff?ps41xx') format('woff'),
url('fonts/icomoon.svg?ps41xx#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
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-icon:before {
content: "\e900";
}こちらの内容を全て自分のサイトで使用しているstyle.cssに追記してください。
これで、完成です。
試しに使ってみる
自作したアイコンを使用する場合は、
<span class="icon-自分でつけたアイコン名"></span>
上記の「自分でつけたアイコン名」を作成時に設定したアイコン名に代えれば、使用できるはずです。
もしわからない場合は、先ほどダウンロードしたファイルの中にdemoというファイルが入っているので、
そこを見れば、「自分でつけたアイコン名」がわかるはずなので、確認してください。
Webフォントにしてしまえば、大きさや色などをスタイルシートで、
簡単に変更することができるので非常に便利です。
皆さんもお試しあれ～
コピペも良いですが・・・
テーマによってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ！
私が使用したおすすめの本はこちらです。
コメント