nuxt.jsでfontawsome5アイコンを使用するには

最終更新日

Comments: 0

nuxt.js+bulmaでアプリケーション開発しようとしたが、よくbulmaとセットになってるfontawsomeが公式インストーラーでは入らない、使い方がよくわからないのでまとめてみました。

abstract

設定ファイル(nuxt.config.js)に数行書き込めば簡単に使うことができる。
方法としてはいくつかあるようです。

今回の方針

  • 特殊タグを使用する方式
  • 無料版の範囲のみ
  • 使えるアイコンは全て使えるようにする

手順

まずは使用するライブラリをインストール

$ npm install @fortawesome/fontawesome-svg-core
$ npm install @fortawesome/vue-fontawesome
$ npm install @fortawesome/free-solid-svg-icons

使用するライブラリとしてnuxt.jsに登録する

.vueファイルでアイコンを使う部分に下記のようにタグを置いてあげることでアイコンができる

↓結果のアイコンになります

細かいアイコンの種類、使い方は後ほどまとめようと思います。

まとめ

うまく使用できるようになったでしょうか?
nuxt.jsは色々使用できて便利かもしれませんが細かい部分でわからないところがあるかと思います。
この記事が参考になれば幸いです。

都内でエンジニアやってます 趣味で色々開発しつつのんびりと生活してます

シェアする

コメントを残す

%d人のブロガーが「いいね」をつけました。