font awesome npm 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: npm font awesome vue

// Install all needed fontawesome dependencies
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/vue-fontawesome

// Import fontawesome 
import {library} from '@fortawesome/fontawesome-svg-core'
import {fas} from '@fortawesome/free-solid-svg-icons'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'

// Add solid icons library
library.add(fas);

// Create fontawesome vue component
Vue.component('font-awesome-icon', FontAwesomeIcon)