FontAwesomeをVue.jsで使う方法は、公式ドキュメントに書いてある通り。
しかしBrandsアイコンの使い方が分からなくて少しはまった。
Vue.jsでFont Awesomeを使う準備
まず普通に進めてみる。
インストール
$ npm i --save @fortawesome/fontawesome-svg-core \
> npm i --save @fortawesome/free-solid-svg-icons \
> npm i --save @fortawesome/vue-fontawesome \
> npm i --save @fortawesome/free-brands-svg-icons
最後の1行がBrandsアイコンを使うために追加した行。
main.jsを編集
src/main.jsのimport文の下に以下の行を追加。
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas, fab)
Vue.component('font-awesome-icon', FontAwesomeIcon)
アイコンを使ってみる
SolidとBrandsをそれぞれ使ってみる。
今回はAboutページを例にする。(src/views/About.vue)
Solidアイコンは表示される
コーヒーのアイコンを使ってみる。
<template>
<div class="about">
<h1>This is an about page</h1>
<h2>coffee : <font-awesome-icon icon="coffee" /></h2>
</div>
</template>
結果、下のように無事表示される。
ここまではドキュメント通り。
Brandsアイコンは表示されない
次にBrandsアイコンであるTwitterアイコンを同じようにして使ってみる。
<template>
<div class="about">
<h1>This is an about page</h1>
<h2>coffee : <font-awesome-icon icon="coffee" /></h2>
<h2>twitter : <font-awesome-icon icon="twitter" /></h2>
</div>
</template>
結果、今度はうまく表示されない。
結論:Brandsはこう書く
Brandsアイコンを使うには次のようにして書く必要がある。
<template>
<div class="about">
<h1>This is an about page</h1>
<h2>coffee : <font-awesome-icon icon="coffee" /></h2>
<h2>twitter : <font-awesome-icon :icon="['fab', 'twitter']" /></h2>
</div>
</template>
結果...
無事に表示された。