Font awesome is 何？
公式によると
Icons. Easy. Done.
Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
なツールキットです！
画像を用いるよりアイコンを利用するほうが便利なときがありますよね。
Font awesome は可愛い・かっこいいアイコンがたくさん用意されていて、使い方も簡単なのでおすすめです！
（昔は Qiita 内でも使えたりしたんですよー）
Font awesome をインストール
まずはプロジェクトへ移動して。
> cd my-project
次のコマンドでインストールします。
- Yarn を使った場合
> yarn add @fortawesome/fontawesome-svg-core
> yarn add @fortawesome/free-solid-svg-icons
> yarn add @fortawesome/vue-fontawesome
- npm を使った場合
> npm install --save @fortawesome/fontawesome-svg-core
> npm install --save @fortawesome/free-solid-svg-icons
> npm install --save @fortawesome/vue-fontawesome
Font awesome が用意しているアイコンには他にもあります。
- Solid（上でインストール済み）
- Regular
- Light（有料プランのみ）
- Brands
必要な場合はインストールしましょう。
> yarn add @fortawesome/free-regular-svg-icons
> yarn add @fortawesome/pro-regular-svg-icons
> yarn add @fortawesome/free-brands-svg-icons
Vue.js で使うには？
main.js に次のようにコーディングします。
import Vue from 'vue'
import App from './App.vue'
/* ここから */
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faCoffee)
Vue.component('font-awesome-icon', FontAwesomeIcon)
/* ここまで */
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
後はテンプレートにアイコン用のタグを埋め込むだけで使用することができます。
補足
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
// ...
library.add(faCoffee)
この部分で library にアイコンを追加しているわけですが、複数追加したい場合はカンマ区切りで複数のアイコンを追加できます。
import { faCoffee, faSpinner } from '@fortawesome/free-solid-svg-icons'
// ...
library.add(faCoffee, faSpinner)
アイコン一個一個だなんてめんどい．．．って人はこんな感じに全部追加できます。
import { fas } from '@fortawesome/free-solid-svg-icons'
// ...
library.add(fas)
ちなみに私の設定は．．．
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
// ...
library.add(fas, far, fab)
（めんどくさがり屋って言わないで）
確認しよう
About ページにアイコンを表示してみましょう！
<template>
<div class="about">
<h1>This is an about page <font-awesome-icon icon="coffee" /></h1>
</div>
</template>
アプリ起動して。
> cd my-project
> yarn serve
http://localhost:8080/about にアクセスです！
いえい！
まとめ
Vue.js は単一ファイルコンポーネントなので import したりコンポーネントとして登録したりひと手間あります。
普通にクラス指定で使えばいいんじゃない？とか思っちゃいますけど まあ、このあたりは慣れになると思いますが、フレームワークの推奨する使い方に従って使ったほうがいいのかな？
インデックスページから来た人向け
アプリにアイコンが表示されると洗練された感じが出てきますよね～（思い込み）
これから少しづつ機能を増やしていきますので、よかったら他の記事も見てみてください！