Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@DaisukeNishi

Vue.jsでFontAwesomeを使う

More than 1 year has passed since last update.

普通にFontawesomeを読み込んで使っても大丈夫と思うんですが、
あえてvue.js専用にラップしてある物の使い方(備忘録)です。

インストール

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

main.js

import Vue from 'vue'
import App from './App.vue'
//(省略)
import { library } from '@fortawesome/fontawesome-svg-core'
//基本セットを読み込んで、使いたいアイコンを読み込みます。
import { faHome , faSearch} from '@fortawesome/free-solid-svg-icons'
import { faFacebook , faLine } from '@fortawesome/free-brands-svg-icons'
//使うものはあらかじめ読み込んで「library」に追加しておきます。
library.add(faHome)
library.add(faSearch)
library.add(faFacebook)
library.add(faLine)
//さらに「vue-fontawesome」を読み込みます。
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
//カスタムタグ「font-awesome-icon」として使えるようにします。
Vue.component('font-awesome-icon', FontAwesomeIcon)

Component.vue

<template lang="pug">
.btn
  a
    font-awesome-icon(
    :icon="['fas','home']"
    )
    | Home
  a
    font-awesome-icon(
    :icon="['fas', 'search']"
    )
    | Search
  a
    font-awesome-icon(
    :icon="['fab','facebook']"
    )
    | Facebook
  a
    font-awesome-icon(
    :icon="['fab', 'line']"
    )
    | Line
</template>

これでアイコンが使えるようになります。
慣れた人ならCSSで定義したほうが速いような気がしますが、
このやり方もスッキリしていて、割と良い気がします。

参考にした記事

1
Help us understand the problem. What is going on with this article?
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
DaisukeNishi
エンジニアに憧れるデザイナーです。性格診断は「INTP」思いやり・社交性に欠ける人。。→ http://xn--16-573d25rtpd1v4e.com/intp.php

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?