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

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

IcoMoonとは？

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

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

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

Font Awesomeをダウンロード

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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