【Nuxt.js】font-awesomeを使えるようにする

2020年8月9日

Nuxt.jsでfont-awesomeを使えるように設定する方法です。

※ちなみにこの記事で使う方法はfont-awesomeをCDN経由で取得する方法です。

環境情報

node.js: version 12.18.0
npm: version 6.14.4
Nuxt.js: version 2.13.0
font-awesome: v5.6.1

Nuxt.jsでfont-awesomeを使えるようにする

nuxt.config.jsのheadタグのlinkタグに以下を追加すればOKです。

{ rel: 'stylesheet', href: 'https://use.fontawesome.com/releases/v5.6.1/css/all.css'}

headタグ全体では以下のような記載になります。

head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || '',
      },
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://use.fontawesome.com/releases/v5.6.1/css/all.css' }, // この行を追加
    ],
  },

これだけでfont-awesomeを使えるようになります。