Nuxt.jsにてFontAwesomeを利用する方法

Nuxt.jsにてFontAwesomeを利用する方法を説明します。

下記実行します。

yarn add @fortawesome/fontawesome-free-webfonts

※「fontawesome・・・」ではなく、「fortawesome・・・」なのでご注意を。

nuxt.config.jsのcssに追記します。

css: [
 //下記追記
 '@fortawesome/fontawesome-free-webfonts',
 '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css',
 '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css',
 '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css',
],

上記保存できたら再度nuxtを起動します。

yarn dev

これでFontawesomeが利用できるようになりました。

試しに下記を記入してみると

<i class="fab fa-twitter-square"></i>

表示されます。

Fontawesomeのコードは下記より確認してください。

Font Awesome

以上です。