楽しいだけで十分です

FontAwesomeをNuxt.jsで使う (npm経由)

基本的には、Using a Package Manager | Font Awesomeに書かれてることをやればよさそうです。今回は、Free版を入れて試しました。

動作確認したバージョン

"nuxt": "^2.0.0"
"@fortawesome/fontawesome-free": "^5.3.1"

手順

  • パッケージをインストール
npm install --save-dev @fortawesome/fontawesome-free
  • /css/all.cssを読み込む
// nuxt.config.js

css: [
  '@fortawesome/fontawesome-free/css/all.css',
],
  • HTMLで実際に使う
<body>
  <!-- 試しに棒グラフを出してみる -->
  <i class="far fa-chart-bar"/>
</body>

ここまでで使えるようになっているはずです。

手順の補足

もし特定のアイコンの種類しか使わないなら、使うファイルのみを読み込むこともできるようです。その場合、@fortawesome/fontawesome-free/css/fontawesome.cssも合わせて読み込まないと、アイコンが表示されないようでした。(Getting Started | Font AwesomeのCDNの部分で出てくるものに対応するCSSファイルを読み込むようにしてみました。これであっているのかはわからないです...。)

// nuxt.config.js

  css: [
    '@fortawesome/fontawesome-free/css/regular.css',  // 例として regular を読み込む
    '@fortawesome/fontawesome-free/css/fontawesome.css', // これは種類に関わらず読み込む必要があるみたい
  ],

おまけ

FontAwesomeに種類があるの知らなかったので勉強になりました。参考: Font Awesome 5がリリースされたぞ! - Qiita

  • Solid(塗りつぶし)
  • Regular(線・標準の太さ)
  • light(線・細い Proのみ)
  • Brands(ブランド)
yinm

WRITTEN BY yinm

I'm a software engineer.