Font AwesomeはVue用にパッケージが公開されているので、npmなどでインストールして利用することができます。しかし、TwitterやFacebookのアイコン（以下、ブランドアイコン）を利用する際には公式ドキュメントのままやっても表示できず、少し工夫が必要です。

インストールとインポート

Twitteなどのアイコンはfree-solid-svg-iconsには含まれないので、追加のパッケージをインストールする必要があります。

$ npm i --save @fortawesome/free-brands-svg-icons

インストールしたら、Vueにも読み込みましょう。

import { library } from "@fortawesome/fontawesome-svg-core";
import { faCoffee } from "@fortawesome/free-solid-svg-icons"; // 通常のフリーアイコン
import { faTwitter } from "@fortawesome/free-brands-svg-icons"; // ブランドアイコンを使うにはこれを読み込む必要がある
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

import {}の中には使いたいアイコンの名前を入れます。名前はFont AwesomeのアイコンページのHTMLコードのクラス名で確認できます。ただし、import文の中にはハイフンは入れられないのでキャメルケースで指定します。（fa-twitter → faTwitter）

必要なアイコンをインポートしたら、libraryに追加します。

library.add(faCoffee, faTwitter);

Vueコンポーネントとして登録します。

Vue.component("font-awesome-icon", FontAwesomeIcon);

Vueコンポーネントで呼び出す

公式ドキュメントによると、コンポーネントでFont Awesomeアイコンを呼び出すには次のように使えばよいと書いてあります。

<font-awesome-icon icon="coffee" />

しかし、同じような記述でtwitterアイコンを呼び出しても表示されません。ブランドアイコンは以下のような記述でないと表示できません。

<font-awesome-icon :icon="['fab', 'twitter']"　/>

iconを:iconにし、配列でfabとアイコン名を指定します。アイコン名は先ほどインポートした名前からfaを取ってハイフネーションにしたものになります。（faFacebookF → facebook-f）

coffeeの例で上げた記述方法は:icon="['fas', 'coffee']"を省略した記法のようなので、自動的に通常のフリーアイコンライブラリに登録されているものであればいけますが、ブランドアイコンなどはきちんと記述する必要があるようです。

以上、VueでFont AwesomeのTwitterアイコンなどを使用する方法でした。