SVGのアイコンをWebフォントにする（IcoMoonの使い方）

あのー、SVGの画像をフォントにしたいんですけどー

おー、できますよー。Webフォントにしちゃいましょうー

IcoMoonの使い方

では早速スタートです。

IcoMoonはこちら

『IcoMoon App』をクリック。

アイコンを選びます。

『Import Icons』からインポートもできます。作ったアイコンもフォント化できます。

右下の『Generate Font』をクリック。

いろいろ変更も簡単です。

右下の『Download』でダウンロードします。

ファイルはこんな感じです。

必要なのは「fontsフォルダ内の4つのファイル」と「style.css」だけです。
サーバーには「fontsフォルダ内の4つのファイル」をアップロードします。
「style.css」はそのままアップロードしてもオッケーですが、内容だけ他のCSSにコピペしてもオッケーです。

「style.css」の内容はこんな感じです。

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?ch1k2p');
  src:  url('fonts/icomoon.eot?ch1k2p#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?ch1k2p') format('truetype'),
    url('fonts/icomoon.woff?ch1k2p') format('woff'),
    url('fonts/icomoon.svg?ch1k2p#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  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-child:before {
  content: "\e900";
}
.icon-home:before {
  content: "\e901";
}
.icon-camera:before {
  content: "\e90f";
}
.icon-mobile:before {
  content: "\e958";
}

HTMLで使ったり、CSSで使ったりできます

HTMLで使うなら

<span class="icon-child"></span>

CSSで使うなら

.icon-child:before {
  content: "\e900";
}

HTML Entity（文字コード）でも使えます。



JSONファイルがあるので簡単に追加することができます

『Import Icons』からJSONファイルをインポートできます

JSONファイルはこれですね

さいごに

わー、とっても便利ですー

このサイトでも使ってますー、とっても便利ですー