この記事は最終更新日から1年以上が経過しています。

Nuxt.jsにFont Awesomeを追加する方法

2020-09-22
2021-03-02

今回は、Nuxt.jsにFont Awesomeを追加する方法を紹介します。

Font Awesomeを使用すると、手軽におしゃれなアイコンを使うことができます。

Nuxt.jsにFont Awesomeをインストールする

Nuxt.jsのプロジェクトにFont Awesomeをインストールします。

使用するアイコンとして、SolidアイコンBrandアイコンをインストールします。

bash
yarn add nuxt-fontawesome @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons

Font Awesomeには、SolidアイコンやBrandアイコンの他にもRegularアイコンなどがあります。
また、Font Awesome Proは年間$99で使用することができます。

興味がある方は見てみるのも良いでしょう。

nuxt.config.jsの設定

nuxt.config.jsにFont Awesomeの設定を書いていきます。

js
{ modules: [ 'nuxt-fontawesome', // <= 追記 ], fontawesome: { component: "fa", imports: [ { set: "@fortawesome/free-solid-svg-icons", // Solidアイコン icons: ["faHome", "faCaretRight"], }, { set: "@fortawesome/free-brands-svg-icons", // Brandアイコン icons: ["faTwitter"], }, ], }, }

上記のように設定すると、Solidアイコンからhomeアイコンとcaret-rightアイコンが、brandアイコンからTwitterアイコンが使えるようになります。
Font Awesomeはケバブケースで表示されているのですが、Nuxt.jsにインポートする時はキャメルケースを使用します。

VueファイルでFont Awesomeを使う

nuxt.config.jsを設定すると、各VueファイルでFont Awesomeを使用できるようになります。

Solidアイコンの場合

html
<fa :icon="['fas', 'home']" />

Brandアイコンの場合

html
<fa :icon="['fab', 'twitter']" />

上記のようなHTMLタグを書くと、アイコンが表示されます。
注意点としては、

  • Solidアイコンはfas、Brandアイコンはfabと書くこと
  • アイコン名をケバブケースで書くこと

です。

以上、Font Awesomeの使い方をまとめてきました。

Font Awesome以外のもたくさん可愛いアイコンがあるので、ネット上で調べてみましょう。