FontAwesomeの欲しいのだけチョイスしたい。
便利で、種類もあるFontAwesomeよく利用してます。
かゆいところに手が届く便利なアイコンが沢山使えます。
有料だとさらにたくさん使えるのですが、無料でも全然いける。
ただ、こやつ・・・重たい・・・非常に重たい。
（そして、最近登録制になったのでサイト毎に登録するのちょっと面倒です。）
沢山使えて便利なのですが、その分データが多いので重たい。
使いたいものだけチョイスして、サイトにおけないものだろうか。
スタバの注文みたいに。
と探していたところ、みつけたのが「IcoMoon」です。
目次
IcoMoonとは？
IcoMoonは、Webフォント素材の配布、自作のアイコンや他の素材サイトでダウンロードしたSVGアイコンをWebフォントに変換できるサービスを提供しています。
有料フォントの販売、無料のフォントを配布しているのですが今回は、FontAwesomeから欲しいのだけチョイスする方法をお伝えします。
FontAwesomeのファイルを用意
・FontAwesomeでアイコンファイルDLしてください。
IcoMoonのサイトにGo!
IcoMoonのサイトにアクセス。
https://icomoon.io/
右上の紫のボタン「IcoMoon App」をポチりしてください。
アイコンが表示されました。こちらは、IcoMoonで提供されているフリーフォントです。
今回は、目的が、FontAwesomeなので、こちらは使用しません。
FontAwesomeのsvgをアップ！
IcoMoonに、webfontsフォルダのsvgファイルをアップしていきます。
左上の、紫色のボタン「Inport lcons」をクリック！
FontAwesomeでダウンロードした、webfontsのsvgファイルを選択、アップしてください。
FontAwesomeの一覧が表示されました。
使いたいフォントをチョイス！
使いたいフォントをクリックしていきます。
選んだフォントはオレンジ色の線で囲まれます。
選んだフォント数は一番下のバーの真ん中に表示されます。
使いやすい様に、ちょっとカスタマイズ。
使いたいアイコンを選択したら、フッター部分にくっついた右下のGenerate Fontをクリックします。
選んだフォントが表示されました！
よく使うやつですね、はい。
ここから使いやすい様に、ちょっと設定します。
ヘッター部分、左上の歯車アイコンの、「preferences」を押してください。
設定画面がでてきます。
アイコンフォントにつける「CSS Prefix」を変更します。
FontAwesomeにあわせて、初期値、 icon- を、fa-に変更。
これでいつもの様にスタイル名が使えます。
余白調整、Whitespace Width (% Em)の50を、15に変更します。
閉じて、フッターの右下のダウンロードボタンを押してください。
ファイルがダウンロードできました！完成です。
必要ファイルを利用するサイトにアップ
解凍して、中身を確認します。
fontsフォルダーと、style.cssをFTPでアップします。
自分は、CSSフォルダー内に参照先を保ったまま、UPしました。
（style.cssって名前だとわかりづらいので、font.cssへ、リネイムしています。）
|
1 |
@import url("assets/css/font.css"); |
等でリンクで大元のCSSファイル等に読み込み。
これで下準備が完了です。
ここからの利用方法は、FontAwesomeと変わらないです。
ダウンロードしたアイコンの一覧や、指定スタイル名等は、ダウンロードしたファイルの、demo.html
で確認できますので、こちらからご利用ください。
FontAwesomeと違うのは、CSSでの指定時に、font-family名が、
font-family: “icomoon”;
になる点です。
ここ以外はほんとんどかわりません。
これで、だいぶ軽量化できます。
以上、美味しいところだけチョイスして、使う方法でした！
IcoMoon、もっといろんな使い方があるようなので、どんどん活用方法をみつけていきたいです。
オリジナルのアイコンとか作ったら楽しそう。
最近のあべさん
・1年あと2ヶ月ほどしかないのにびっくりしている。
・ソーシャルディスタンスのため、運動会と、お遊戯会に保護者の参加制限がもうけられてしまい、1人で行くことになってビデオカメラと一眼レフカメラどうやって同時に回そうか悩んでる。
・PS5をおむかえするのか家族会議。
・11月の3歳幼女の誕生日プレゼントにかなり悩んでいる。12月には10歳男児。
・ねんどろいどを4体（4種類）おむかえしようと考えている。（黒鶴丸は予約済み）
・楽しみにしていた舞台の中止が相次いでしょぼん、妹とモチベのあげ方を模索中。
関連記事
記事を書いた人
コード打って、オタ活して、3人の子育てママして、奥さんしてる書けないくらいclass属性だけは多いコーダーです。
コード打って、オタ活して、3人の子育てママして、奥さんしてる書けないくらいclass属性だけは多いコーダーです。