How to add FontAwesome icons to Vuejs

I just learned how to add the icons of FontAwesome to my Vuejs (version 2) project, for example, the “edit” icon and the “delete” icon. Here are the steps:

1, Install in the root repository of your project (very important):

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/vue-fontawesome@latest

2, Create a new JS file “icons.js”, also in the project root repository, and copy the code inside:

import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons'
library.add(faEdit, faTrash)
Vue.component('fa-icon', FontAwesomeIcon)

3, Import the file to “main.js”:

import "/icons"

4, Now instead of simple words like “Edit” or “Delete” with the bootstrap buttons in your UI, you can just change them by these icons, and put them where you need:

<fa-icon :icon="['fas', 'edit']"/>
<fa-icon :icon="['fas', 'trash']"/>

Then run “npm run serve”, here is the photo:

edit, delete icons

For more icon names, search on the website: https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

That’s simple, right? Have fun 🤩 !