ロゴテキスト ロゴ

    Nuxt.jsにFont Awesomeを導入する

    Nuxt.jsにFont Awesomeを導入する

    Nuxt.jsのプロジェクトにFont Awesomeを導入します。

    基本設定

    パッケージを追加

    Nuxt用のFont Awesomeのパッケージがあるのでそちらを追加

    $ yarn add nuxt-fontawesome
    ・・・
    info All dependencies
    ├─ @fortawesome/fontawesome-common-types@0.2.32
    ├─ @fortawesome/fontawesome-svg-core@1.2.32
    ├─ @fortawesome/vue-fontawesome@0.1.10
    └─ nuxt-fontawesome@0.4.0
      Done in 5.14s.

    公式を見ると

    Also it may be needed to explicitly install fontawesome, if your webpack build fails (また、webpackのビルドが失敗した場合は、fontawesomeを明示的にインストールする必要があるかもしれません。- google翻訳)


    npm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome


    vaso2/nuxt-fontawesome: Nuxt module for Fontawesome 5 integration with ES6 imports and tree shakingより引用

    と書かれているのでこの時点でビルドが通らなくなった人は ↑ を行うと良さそうです。 私は上記を実行せずに問題なかったので実行してません。

    nuxt.config.jsに設定する

    nuxt-fontawesomeの設定をnuxt.config.jsにします

    nuxt.config.js
    export default {
      modules: ['nuxt-fontawesome'],
      fontawesome: {
        imports: [
          {
            set: '@fortawesome/free-solid-svg-icons',
            icons: ['fas'],
          },
        ],
      },
      ・・・
    }

    Font Awesomeを使う

    コンポーネント内で表示する

    使い方は簡単、あとは公式に書かれているように <template> 内で読み込むだけ。 importも不要です

    <template>
      <div>
        <font-awesome-icon icon="dollar-sign" style="font-size: 30px" />
        <font-awesome-icon icon="cog" />
      </div>
    </template>
    Font Awesomeのアイコンが表示された


    使えるアイコンを調べる

    使えるアイコンを調べるのは公式のアイコン一覧画面で FreeSolid にチェック入れます。 Solid Icons | Font Awesome

    公式でFreeとSolidにチェックを入れる


    ここで表示されるアイコンの下の文字列(ex: address-book)を icon=<アイコン名> と指定する事で使えます。

    <font-awesome-icon icon="address-book" />



    もちろんWebFontとしてのCSSをあてる事も出来ます

    <template>
      <div>
        <font-awesome-icon icon="dog" class="icon dog" />
        <font-awesome-icon icon="cat" class="icon cat" />
      </div>
    </template>
     
    <style>
    .icon {
      font-size: 50px;
    }
    .dog {
      color: #fb8d00;
    }
    .cat {
      color: #ababab;
    }
    </style>
    CSSを当ててみる

    Cannot find moduleの問題

    順番が前後してしまいますが、私の環境だと Cannot find module '@fortawesome/free-solid-svg-icons' というエラーが上記のコンポーネントを表示する前に起きました。

    Font Awesomeのアイコンを表示しようとするとCannot find moduleエラー


    解決策はシンプルで見つからないと言われているパッケージをインストールする事で無事表示されるようになりました!

    $ yarn add @fortawesome/free-solid-svg-icons

    必要なフォントのみを読み込む

    2020.11.29追記



    上記の方法だと全てのFont Awesomeのフォントを読み込む(未使用だとしても読み込んでしまう)ため、 ファイルサイズが大きくなってしまいます。


    ファイルサイズが大きくなる事でページの読み込み時間が長くなりSEO対策的に良くありません



    そのため、必要なフォントのみを読み込む方法を以下の記事に書きました!

    プロフィールの背景画像 プロフィール画像
    Yuki Takara
    都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。