Eyes, JAPAN Blog > IcoMoonを使ってFont Awesomeのアイコンを必要なものだけ使う方法

IcoMoonを使ってFont Awesomeのアイコンを必要なものだけ使う方法

Misato Usui

この記事は1年以上前に書かれたもので、内容が古い可能性がありますのでご注意ください。

ウェブサイトにアイコンを導入する際、種類も豊富でとっても便利なFont Awesomeですが、実際に使うアイコンはごく一部なのに全部読み込んでいると重くて嫌だなーと思いませんか?
アイコンは日々どんどん追加されているし、先日導入しようと思ったときはwoffファイルだけで98KBもありました。

そこで、今日はIcoMoonを使ってFont Awesomeのアイコンを必要なものだけ使う方法をご紹介したいと思います。

IcoMoonとは?

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-03-21-18-22-59

IcoMoonはウェブフォントとして利用できるアイコンを配布するFont Awesomeと同様のサービスです。Font Awesomeと違う特徴として、好きなアイコンだけを選んで使うことができます。

じゃあ、IcoMoonでいいじゃないかと思われる方もいるかもしれませんが、Font Awesomeと比べるとアイコンの数がかなり少ない印象です。デフォルトのアイコンにプラスしてLibraryからアイコンを追加することもできますが、デザインがちょっと凝りすぎているというか…

シンプルなアイコンを使いたいときはFont Awesomeがやはり使いやすいですね。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-03-21-18-17-18

Font Awesomeをダウンロード

それでは早速、IcoMoonを使ってFont Awesomeのアイコンを必要なものだけ使う方法をご紹介したいと思います。

まずは、Font Awesomeのサイトからファイルをダウンロードしましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2017-03-17_16_14_44

ダウンロードしてきたファイル一式の中にsvgファイルがありますので、次はこちらをIcoMoonにインポートします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2017-03-17_16_24_16

IcoMoonにFont Awesomeのアイコンをインポートする

IcoMoonのサイトに移動し、ヘッダー右上の「IcoMoon App」をクリックします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2017-03-21_18_31_39

するとIcoMoonのデフォルトのアイコンを選択できる画面に遷移します。

こちらにFont Awesomeのアイコンを追加したいので、ヘッダー左上の「Import Icons」ボタンから先ほどのfontawesome-webfont.svgファイルをインポートします。

4ff4758002a160c9c25d432eb19b5d5d-1024x247

svgファイルをアップロードすると、あっと言う間にFont Awesomeのアイコンが追加されたかと思います!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-03-17-16-24-52

必要なアイコンだけ選択してダウンロード

あとは、使いたいアイコンをクリックで選択して画面右下の「Generate Font」ボタンをクリック。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2017-03-17_16_28_05

必要な設定が2つだけありますので、ヘッダーの「Preferences」をクリックします。

1) Class Prefix を「fa-」に変更
こうすることで、後ほどクラス名を変更する手間が省けます。

2) Whitespace Widthを「15」に変更
デフォルトのままだと表示位置がずれてしまいます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2017-03-21_18_58_01

上記の設定が完了したら、画面右下のダウンロードボタンからファイル一式をダウンロードして通常のIcoMoonの導入手順と同じようにプロジェクトに導入すればOKです!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2017-03-17_16_31_30

まとめ

私が先日、このやり方を導入したプロジェクトではスタイルシートも含め16KBに軽量化することができました!

手間はかかりますが、少しでも軽化したいウェブサイトでは是非使ってみてはいかがでしょうか。

  • このエントリーをはてなブックマークに追加

Comments are closed.