Vue.js で Font Awesome を使う

4726 ワード
Vue.js FontAwesome Vue.js テキストリンク

Vue.jsでFont Awesomeを使うのに少しだけ詰まったのでメモ程度に残しました。

npmインストールする

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/free-regular-svg-icons
npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/vue-fontawesome

main.jsに以下のコードを追加

main.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fas, far, fab)
Vue.component('font-awesome-icon', FontAwesomeIcon)

Font Awesomeで使いたいマークを調べる（今回はsearch）

https://fontawesome.com/icons/search?style=solid
iタグをそのまま使わず、「これを使う」の部分のみvueでは使います。

App.vue
<!-- 先ほどのfasとsearchを入れる -->
<template>
  <div class="app">
    <h1>検索<font-awesome-icon :icon="['fas', 'search']" /></h1>
  </div>
</template>

以下のように表示されるはず

詰まったところ

:icon="['fas', 'search']"
:icon="['far', 'building']"
:icon="['fab', 'artstation']"

このようにfas、far、fabの指定し、その後ろにアイコン名を入力する必要あり。

参考: https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs