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

SVGのアイコンをWebフォントにする(IcoMoonの使い方)
きのこさん
あのー、SVGの画像をフォントにしたいんですけどー
きのこさん
おー、できますよー。Webフォントにしちゃいましょうー

IcoMoonの使い方

では早速スタートです。

IcoMoonはこちら

『IcoMoon App』をクリック。

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

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

アイコンを選びます。

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

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

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

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

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

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

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

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

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

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

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

必要なのは「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で使ったりできます

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

HTMLで使うなら

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

CSSで使うなら

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

HTML Entity(文字コード)でも使えます。

&#xe900;

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

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

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

JSONファイルはこれですね

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

さいごに

きのこさん
わー、とっても便利ですー
きのこさん
このサイトでも使ってますー、とっても便利ですー
デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

キツネとレモン KITSUNE TO LEMON
キツネとレモン KITSUNE TO LEMON
あったらいいなと思うもの/窓の家と生活
『未来のミライ』、何度も見てしまう