自分で作ったアイコン(SVG)をWEBフォント化する

2017/06/05 タグ: ,
  • このエントリーをはてなブックマークに追加

WEBサイトのメニューやリンクでは、アイコンやボタンで画像を使う機会が減りました。スマホや高精細なPCのディスプレイなど閲覧環境が多様化し、レスポンシブ化が進んでいるためです。そんなことから、どの画面で見ても伸縮自在に対応できるWEBフォントがよく使われています。

SPONSOR

アイコンのWEBフォントといえば

bootstrapFont 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フォント化しておくと、サイズやカラーを自由に変更して使えるので便利そうです。

SPONSOR
記事を書いている中の人
イリテク株式会社/入江 慎吾
WEBサービスやアプリのデザイン・開発をやっているクリエイターです。クラウド見積請求:CLOUD PAPER、リモートワーク求人:Rework、買い物メモアプリ:Rememo。情熱のこもったプロダクトをどんどんつくりたいです。(もっと詳しいプロフィール
関連する記事
メールマガジンで新着記事をフォロー

 

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む
イリテクで開発したプロダクト
SPONSOR
こちらの記事もおすすめです