VuetifyでFont Awesomeを使う方法
以前1回やったはずなのにすっかり忘れていたのでメモ。
npmでfontawesomeのfree版をインストールします。
npm install --save @fortawesome/fontawesome-free
main.jsでimportします。
import '@fortawesome/fontawesome-free/css/all.css'
使いたいコンポーネントで下記のように指定すればOK。
<v-icon>fas fa-pen</v-icon>
色の変更はこんな感じ。
primaryなどVuetifyのテーマに合わせた色にもできます。
<v-icon color="red">fas fa-pen</v-icon>
<v-icon color="primary">fas fa-pen</v-icon>
サイズも変更できます。
<v-icon small>fas fa-pen</v-icon>
<v-icon medium>fas fa-pen</v-icon>
<v-icon x-large>fas fa-pen</v-icon>
ボタンの中に使うときは left
right
を使ってあげるといい感じになります。
<v-btn><v-icon small left>fas fa-pen</v-icon>編集</v-btn>
<v-btn>編集<v-icon small right>fas fa-pen</v-icon></v-btn>
ダークテーマ、ライトテーマなどに合わせた色にも変更可能です。
ドキュメントは下記。
(日本語版だと一部説明が不足するので英語版がおすすめです。)
スポンサーリンク