自分で作ったアイコン(SVG)をWEBフォント化する
WEBサイトのメニューやリンクでは、アイコンやボタンで画像を使う機会が減りました。スマホや高精細なPCのディスプレイなど閲覧環境が多様化し、レスポンシブ化が進んでいるためです。そんなことから、どの画面で見ても伸縮自在に対応できるWEBフォントがよく使われています。
目次
アイコンのWEBフォントといえば
bootstrapやFont Awesomeをよく使います。システムのUIにも使えるアイコンが多くて便利。デザイン力のないシステムエンジニアさんにも好まれています。クオリティの高いアイコンを使えば、綺麗にみえますし。
ただ、この中にマッチするアイコンがなかった場合どうするか。イラストレーターやSketchで自作することになりますが、画像のまま使うと使いにくいです。自作アイコンも同じようにWEBフォントとして使いたいですよね。それが、かんたんにできるんです。
IcoMoonでWEBフォントを作れる
まず、使いたい自作アイコンをsvgで書き出してください。ファイル名も英字でわかりやすいものをつけておきます。次にIcoMoonを開いてsvgファイルをアップロード。
次に下のタブから、作ったアイコンをダウンロードします。
ダウンロードして解凍すると、このようなファイルが入ってます。
フォントをコピー
fontsをフォルダごと利用したいサイトにコピー。
CSSをコピー
style.cssの中身を利用したいサイトのCSSファイルにコピーしましょう。
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?v58evj');
src: url('fonts/icomoon.eot?v58evj#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?v58evj') format('truetype'),
url('fonts/icomoon.woff?v58evj') format('woff'),
url('fonts/icomoon.svg?v58evj#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-pen:before {
content: "\e900";
}
fontsのパスはさきほどコピーしたフォルダの場所とあわせること。
あとは、使いたい箇所で
<span class="icon-pen"></span>
のように表記すればアイコンが表示されるはずです。
サービスや社名ロゴもWEBフォント化しておくと、サイズやカラーを自由に変更して使えるので便利そうです。
SPONSER
SHARE
YouTube
PROFILE
