この記事ではSANGOでFontAwesomeを自分のサーバーで読み込む方法をご紹介します。
またこの記事を実践することで好きなFontAwesomeに対応できるだけでなく、利用するCSSを絞り込んでそれを設置できるためサイトスピードの向上にも繋がります。
まずはこちらのサイトよりFontAwesomeのファイルをダウンロードしましょう。
無料版を使う場合はこちらのリンクをクリックするのがいいです。
![](https://saruwakakun.com/sango/wp-content/uploads/2023/09/download-1000x504.png)
ダウンロードしたフォルダにはこのようなフォルダが含まれています。このうちオレンジの枠で囲われたフォルダを使用します。
![](https://saruwakakun.com/sango/wp-content/uploads/2023/09/folders-1000x421.png)
これらのフォルダを子テーマに設置しましょう。
場所は子テーマ→ libraryの中に以下のように設置しましょう。
![](https://saruwakakun.com/sango/wp-content/uploads/2023/09/3cfc6c51981209cbe80a0174fc47d7a9-1000x557.png)
次に、設置したCSSにall.css という名前のファイルがあるのでこのファイルをfa-sango.css という名前に変えましょう。
次に管理画面のSANGO設定に移動して子テーマからFontAwesomeを読み込むように設定を変更します。
SANGO設定 → 詳細設定 → FontAwesome にて、FontAwesomeの読み込み方法を「子テーマのlibrary/css/fa-sango.cssを読み込む」に変更しましょう。
これで設定は完了です。
さらに読み込みたいフォントの種類を絞り込むようにCSSを書くことでCSSのファイルサイズを節約できサイトスピード向上につながります。sango-theme/library/css/fa-sango.cssを参考に使用するフォントだけの最低限のCSSを記述してみましょう。
コメントを残す