ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【CSS】Font Awesomeをできるだけ軽量化して読み込む方法【アイコンフォント】

この記事は、最初の投稿から2年以上が経過しています。

最終更新から967日が経過しています。

【CSS】Font Awesomeをできるだけ軽量化して読み込む方法【アイコンフォント】

「Font Awesomeの読み込みが遅い」
「Font Awesomeのサイズを小さくして PageSpeed Insights のスコアを上げたい 」

悩み

こういった悩みにお答えします。

目次
  1. Font Awesomeをできるだけ小さくして読み込む方法
    1. ダウンロード
    2. CSSファイルの場合
      1. 注意点
    3. SCSSファイルの場合
  2. まとめ

Font Awesomeをできるだけ小さくして読み込む方法

ダウンロード

Font Awesome公式サイトダウンロードページへアクセスします。

Get Started on the Desktop

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

「Download Font Awesome Free for the Desktop」ボタンをクリックします。
ファイル一式がダウンロードされます。

Font Awesome公式サイト

ダウンロードしたzipファイルを解凍します。

CSSファイルの場合

解凍したフォルダから「webfonts」「css」フォルダを、ルートディレクトリに移動します。

一般的なHTMLの場合、ルートディレクトリに移動します。

「css」フォルダ内の「all.css」ファイルをクリックします。

使わないアイコンフォントのCSSがたくさんあるので、必要なアイコンフォント以外を削除します。

//例
.fa-500px:before {
  content: "\f26e"; }
.fa-accessible-icon:before {
  content: "\f368"; }
 ・
 ・
 ・
エディタ

注意点

現実的な流れとしては、以下のどちらかでコーディングをすすめるのがおすすめです。

  • 最初にアイコンフォントを全部削除して、「all.css」に必要なアイコンフォントだけを追加していく。
  • 「all.css」はダウンロードしたままコーディングしていき、最後にまとめて不要なアイコンフォントを削除する。

SCSSファイルの場合

※以下の説明はSCSSが使用できる環境ができている前提です。

解凍したフォルダから「webfonts」「scss」フォルダを、ルートディレクトリに移動します。

一般的なHTMLの場合、ルートディレクトリに移動します。

「scss」フォルダ内の「_icons.scss」ファイルをクリックします。

使わないアイコンフォントのSCSSがたくさんあるので、必要なアイコンフォント以外をコメントアウトします。

//例
//.#{$fa-css-prefix}-500px:before { content: fa-content($fa-var-500px); }
//.#{$fa-css-prefix}-accessible-icon:before { content: fa-content($fa-var-accessible-icon); }
 ・
 ・
 ・

CSSファイルは「webfonts」と同じ階層に出力させてください。

gulp等の詳細な設定にもよりますが、SCSSの場合はコメントアウトで、不要な記述を削除してCSSファイルにすることができます。
できれば、改行や不要な空白も削除するほうがよりCSSのファイルサイズを圧縮できます。

エディタ
POINT
最初にすべてコメントアウトする。
使用するアイコンフォントだけコメントアウトを外していく。

まとめ

Font Awesomeをできるだけ小さくして読み込む方法を紹介しました。
Font AwesomeのCSSファイルはサイズが大きいので、「all.css」のまま使用せず、不要なアイコンフォントは削除することをおすすめします。

Font Awesome 6が、近々リリースされるようです。
仕様が変わるかもしれませんので注意してください。