HOME > WEB制作 > 自分で作ったアイコン(SVG)をWEBフォント化する
2017/06/05 タグ: ,

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

  • このエントリーをはてなブックマークに追加

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

この記事をシェアする
  • このエントリーをはてなブックマークに追加

SPONSER

こちらの記事もおすすめです

お役にたちましたら、メール購読もどうぞ!

 

イリテクの最新記事をお届けします

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む
イリテクのプロフィール
入江 慎吾
System & Design Developer。イリテク株式会社 代表取締役。自社企画でクラウド見積請求書作成サービス「CLOUD PAPER」を開発・運営。仕様を決めずに少ない予算でも開発をスタートできる「開発までできるシステム顧問サービス」を実施中。(もっと詳しく
開発したWebサービス
開発したアプリ
新着記事
カテゴリ/タグ
SPONSER