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

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

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

PROFILE

プロフィール

入江 慎吾
自分が作ったサービスで生きていく。同じゴールを目指すサービス開発集団「入江開発室」を運営(現在約280名) / 個人間スキルシェアサービス「MENTA」は1ヶ月と10日で売上100万円を達成。1日で100社が利用した「JobTag」など多数開発
(詳しいプロフィール)

PRODUCT

イリテクで開発したプロダクト

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす