SVGからオリジナルのwebフォントアイコンを作成する
最終更新日: Update!!
ここ最近ではウェブサイトで使用するアイコンなどのデザイン素材にベクターデータのSVG形式がよく使われるようになってきました。ビットマップに比べて比較的データが軽く、拡大縮小してもクリアに表示されるので、デザインが綺麗に仕上がります。
ただし、単体のイメージデータになりますので、大きさを変えたいや色を変えたいとなると、直接SVGのファイルデータを編集する必要があります。そこで、このSVGをwebフォントとして扱いCSSで制御できるようにしていきます。こうすることで汎用性の高いアイコンが使えるようになります。
画面が切り替わりアイコンを登録するページが表示されます。まずはフォントデータに変換するSVGデータをインポートしていきます。画面左上の「Import Icons」をクリックして先ほど作成したSVGファイルをアップロードしていきます。
ファイルがアップロードされると項目のところにSVGデータがリストで表示されます。項目右端にあるメニューアイコンをクリックするとサブメニューが表示されるので「View / Edit Info」をクリックしてフォントデータの情報を編集します。
フォントデータのメタ情報が表示されます。真ん中にある「Edit Metadata」をクリックして情報を編集していきます。
フォントデータのタイトルや制作者名、サイトURLやライセンス情報などが入力できます。
次にフォントデータに変換・出力していきます。項目にあるアイコンを出力するもの(今回は全て)をクリックして選択状態にします。そして画面右下にある「Generate Font」をクリックします。
webフォントデータに変換されたものがプレビューできますので確認します。問題なければ画面右下にある「Download」ボタンをクリックするとフォントデータやCSS一式がダウンロードされます。
また、この時に画面上部にある「Preferences」をクリックするとフォントデータの詳細設定ができます。CSSで使用するclass名やレガシーブラウザ対応なども設定できます。
インストールしたデータファイル一式は下記のようになっています。
demo-files フォルダ
demo.html
fonts フォルダ
Readme.txt
selection.json
style.css
そのうち使用するのは、「fonts フォルダ」「style.css」の2つになります。このファイルとフォルダをサイト内のディレクトリに配置しますが、「style.css」にあるフォントデータ参照パスは適宜変更します。下記にあるように、eotファイル、svgファイル、ttfファイル、woffファイルの4つが対象になります。
【style.css】※一部抜粋
[code lang="css"]
@font-face {
font-family: 'samplefont';
src: url('fonts/samplefont.eot?mwhr8z');
src: url('fonts/samplefont.eot?mwhr8z#iefix') format('embedded-opentype'),
url('fonts/samplefont.ttf?mwhr8z') format('truetype'),
url('fonts/samplefont.woff?mwhr8z') format('woff'),
url('fonts/samplefont.svg?mwhr8z#blogdeco') format('svg');
font-weight: normal;
font-style: normal;
}
[/code]
あとはサンプルのCSSを参考にコーディングすることでサイトにwebフォントアイコンが表示できるようになります。
webフォントアイコンは既存のデザイン素材などにもたくさんありますが、オリジナリティが出せなかったり、欲しいアイコンがなかったりというケースもあるかと思います。そんな時にピッタリの方法なのではないでしょうか。
webフォントアイコンにするSVGデータを作成
まずはSVG形式でwebフォントアイコンで使用するアイコンを作成していきます。ベクターデータですのでIllustratorやSketchなどのツールを使って作成していきます。この時にアイコンが複数のパスで構成されている場合は、パス同士を複合パスなどにして1つのオブジェクトにしておきます。こうしておくことでフォントデータに変換した時のズレや歪みを防ぐことができます。SVGからフォントデータへ変換してくれるウェブサービス「IcoMoon」
webフォントとして使えるようにするにはSVGをフォントデータに変換しないといけないのですが、今回は「Icomoon」というwebサービスを利用します。まずはウェブサイト(https://icomoon.io/)にアクセスし、トップページの右上にある「IcoMoon App」のボタンをクリックします。







webフォントアイコンは既存のデザイン素材などにもたくさんありますが、オリジナリティが出せなかったり、欲しいアイコンがなかったりというケースもあるかと思います。そんな時にピッタリの方法なのではないでしょうか。
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories