After following all the necessary steps outlined in the Font Awesome documentation and going through various tutorials, I still struggled to display Font Awesome icons in my Vue project. Each tutorial I tried didn't seem to solve the issue, resulting in an error being displayed in the console.
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './scss/main.scss'
import 'normalize.css'
/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'
/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* add icons to the library */
library.add(faUserSecret)
/* add font awesome icon component */
createApp(App)
.use(router)
.mount('#app')
.component('font-awesome-icon', FontAwesomeIcon)
An error is visible in the console; you can see it here.