FontAwesome Vue.js Component

November 29, 2017

NOTE: Refer to latest guide for FontAwesome 5.1.x.

vue-fontawesome is the official Font Awesome 5 Vue component.

Installation

npm install @fortawesome/fontawesome --save
npm install @fortawesome/fontawesome-free-solid --save
npm install @fortawesome/vue-fontawesome --save

Sample 1

Import icon at main.js.

import { faUser } from '@fortawesome/fontawesome-free-solid'
import fontawesome from '@fortawesome/fontawesome'

fontawesome.library.add(faUser)

Component.

<template>
  <div>
    <font-awesome-icon :icon="['fas', 'user']" />
  </div>
</template>

<script>
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'

export default {
  name: 'Sample',
  components: {
    FontAwesomeIcon
  }
}
</script>

Sample 2

Send icon as computed props/data.

<template>
  <div>
    <font-awesome-icon :icon="icon" />
  </div>
</template>

<script>
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import { faUser } from '@fortawesome/fontawesome-free-solid'

export default {
  name: 'Sample',
  computed: {
    icon () {
      return faUser
    }
  },
  components: {
    FontAwesomeIcon
  }
}
</script>

There are some advance feature like animation, size, rotation, refer to https://github.com/FortAwesome/vue-fontawesome

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.