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

あのー、SVGの画像をフォントにしたいんですけどー
おー、できますよー。Webフォントにしちゃいましょうー

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(文字コード)でも使えます。

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

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

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

JSONファイルはこれですね。

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

さいごに

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

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

6

/

22

2024

Googleさんの
おすすめ

6

/

22

2024

デザインの記事

EHON HOTEL
  • 2024.06.21New
  • EHON HOTEL
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】ページ内リンクでスムーズスクロール(固定ヘッダーがあったら)