Vue.jsでFont AwesomeのBrandsアイコンを使う

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>

結果...

無事に表示された。