vue.js - Font-awesome icons don't appear in the website( But appears in the development tool)

Question

Currently I'm working on a VUE project and installed font awesome using npm. But the icons are not visible in the website. These are the commands used for install.

npm install --save @fortawesome/fontawesome-svg-core 
npm install --save @fortawesome/free-solid-svg-icons 
npm install --save @fortawesome/vue-fontawesome

Then I changed the main.js file

import Vue from 'vue'
import App from './App.vue'
import VModal from 'vue-js-modal'
import router from './router'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee, faNewspaper } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCoffee,faNewspaper)

Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
Vue.use(VModal, { dynamic: true, injectModalsContainer: true ,dynamicDefaults: { clickToClose: false } })


new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

and changed the html file

<span class="user-icon">
   <font-awesome-icon :icon="['fas', 'newspaper']" />
</span>

When I check it with the development tool it shows the icon. But it doesn't appear in the website.

question from:https://stackoverflow.com/questions/65896618/font-awesome-icons-dont-appear-in-the-website-but-appears-in-the-development-t

Answer 1

Waitting for answers