font awesome icons vue code example
Example 1: installing fontawesome vue project
//install fontawesome icons
npm install --save-dev @fortawesome/fontawesome-free
//inside main.js add
import '@fortawesome/fontawesome-free/css/all.css' <------
import '@fortawesome/fontawesome-free/js/all.js' <------
.
.
.
new Vue({ router, store, render: h => h(App),}).$mount('#app')
// you can now use the icons anywhere in your project with the <i>
<i class="fab fa-2x fa-facebook"></i>
<i class="fab fa-2x fa-twitter"></i>
<i class="fab fa-2x fa-instagram"></i>
Example 2: vue font awesome icons
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
Example 3: vue font awesome icons
import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faUserSecret)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
Example 4: vue font awesome icons
<template>
<div id="app">
<font-awesome-icon icon="user-secret" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
Example 5: vue font awesome icons
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
library.add(faUserSecret)
Example 6: vue font awesome icons
<font-awesome-icon icon="user-secret" />
<font-awesome-icon :icon="['fas', 'user-secret']" />