FontAwesome Vue.js Component

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 --savenpm install @fortawesome/fontawesome-free-solid --savenpm 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