Help us understand the problem. What is going on with this article?

【Vue.js】Vue-CLI4.1.1でFont awesome5を使う手順

はじめに

Vue-CLI(4.1.1)でFont awesomeを使う手順をまとめました。

公式ドキュメント

この記事が役に立つ方

  • これからVue-CLIでFont awesomeを使ってみたい方

この記事のメリット

  • Vue-CLIでFont awesomeが使えるようになる

環境

OS: macOS Catalina 10.15.1
Vue: 2.6.10
vue-cli: 4.1.1
vue-router: 2.6.10
vuex: 3.1.2

1.インストール

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/vue-fontawesome

上記で基本的なアイコンは読み込めるようになります。

注意

InstagramやTwitterなどのブランドアイコンは別ファイルに切り分けられているため、別途読み込みが必要です。

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

必要があれば上記コマンドでインストールしましょう。

2.使うアイコンの登録

2-1.使うアイコン名を確認

Font awesomeのサイトで任意のアイコン詳細画面まで行き、枠で囲ってある2箇所を確認しておきましょう。

スクリーンショット 2019-12-16 0.28.02.png

2-2.使うアイコンをsrc/main.jsに登録

確認しておいた情報を元に、以下コードを書きます。

src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// ここから追記 //

import { library } from '@fortawesome/fontawesome-svg-core'

// solidの中で何を使うかをキャメルケースで記載
import { faDog, faHotdog } from '@fortawesome/free-solid-svg-icons'

// brandsの中で何を使うかをキャメルケースで記載
import { faTwitterSquare } from "@fortawesome/free-brands-svg-icons"

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// 上記で記載したアイコン名をLibraryに追加
// solid, brands関係なしでOK。
library.add(faDog, faHotdog, faTwitterSquare)

Vue.component('font-awesome-icon', FontAwesomeIcon)

// ここまで追記 //

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

solid

image.png image.png

brands

image.png

これで、上記アイコンが使えるようになっています。

3.任意のテンプレートに記述

使いたい箇所に以下のように記述すればアイコンが反映されます。
※例はテキトーです。

solid

<p>
  <font-awesome-icon :icon="['fas', 'dog']" />
  かわいいワンコ
</p>
<h1>
  <font-awesome-icon :icon="['fas', 'hotdog']" />
  ホットドッグ早食い大会!
</h1>

brands

<a href="twitterへのリンク">
  <font-awesome-icon :icon="['fab', 'twitter-square']" />
</a>

おわりに

最後まで読んで頂きありがとうございました:bow_tone1:

どなたかのお役に立てれば幸いです:relaxed:

参考にさせて頂いたサイト(いつもありがとうございます)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした