最近、Vue.jsをぽちぽち触りながらホームページを作ろうとしています。
そこで、TwitterやFacebookなどのソーシャルアイコンを追加するのに苦戦したので、備忘録として手順を書き留めておきます。


手順

1) FontAwesomeの追加
npmまたはyarnでfree-brands-svg-iconsというライブラリを追加する。
  npm i --save @fortawesome/free-brands-svg-icons
で追加可能。

2)main.jsでインポート。
  import { library} from "@fortawesome/fontawesome-svg-core";
  import {fab} from '@fortawesome/free-brands-svg-icons'
  library.add(fab);
の3行追加で、ひとつひとつ個別にimportしなくても済む。

3).vueファイル内のアイコンを追加したい部分に以下を書く。
  <font-awesome-icon :icon="['fab', 'facebook-f']" />

おしまい。
デフォルトで、Font Awesomeのアイコンは常にfasで表示するようになっているので、fabなんてないよ！と怒ってくるみたいです。なので、上記のような形でfabを指定してあげる必要があるようですね。


参考

Can't add brand icons...のIssue
Font Awesomeでのimport方法（公式サイト）