SVGのアイコンをWebフォントにする(IcoMoonの使い方)
- 2021.11.3
- デザインツール


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

おー、できますよー。Webフォントにしちゃいましょうー
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ファイルはこれですね
さいごに

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

このサイトでも使ってますー、とっても便利ですー
おすすめ
かんれん
- web / 2019.7.19
- 【CSS】olのリストで①、②、③(丸数字)を表示させる
- web / 2020.10.28
- 【CSS】注釈(※、*1)を記載するときのインデント合わせ(頭合わせ)
- web / 2019.12.19
- 【CSS】背景画像を固定したおしゃれなLP(ランディングページ)を作ってみよう
- web / 2018.10.24
- 【CSS】ベンダープレフィックス 必要なもの不要なもの
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
- web / 2021.9.17
- 【jQuery】ページ内リンクでスムーズスクロール(スクロール位置の調整も簡単にできる)
Googleさんのおすすめ
デザインの記事
- 2023.01.25New
- good eighty%
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2023.01.25New
- good eighty%
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2022.06.04
- 『点』、登場人物は3人だけ
- (C)2017 WARNER MUSIC JAPAN INC. もくじ 『点』 登場人物は3人だけ なんとも心地よい …
- いつかのこと – 無印良品の家と暮らす