Hugoでfontawesomeを使う

Font AwesomeをHugoで使いたいので、その手順を記録します。

@fortawesome/fontawesome-freeは簡単だけど、使ってないアイコンも入っているのでファイルのサイズが大きくなります。 なので、今回は@fortawesome/fontawesome-svg-coreを使います。

1. FontAwesomeのパッケージをインストール

   yarn add -D @fortawesome/fontawesome-svg-core
   yarn add -D @fortawesome/free-regular-svg-icons
   yarn add -D @fortawesome/free-solid-svg-icons
   

2. jsファイルをビルドするにはESBuildが必要なので、インストール

   yarn add -D esbuild
   

3. jsファイル作成 assets/js/main.jsファイルを作成、内容は下記となります。

   1 2 3 4

   import {config,dom,library} from '@fortawesome/fontawesome-svg-core'; import {faDragon} from '@fortawesome/free-solid-svg-icons'; library.add(faDragon); dom.i2svg();

4. jsファイルを読み込み

   1 2	{{ $built := resources.Get "js/main.js" | js.Build }} <script type="text/javascript" src="{{ $built.RelPermalink }}" defer></script>

5. アイコンを使います

   1	<i class="fa fa-dragon"></i>

以上。