Fontawesome not loading for vue 2-CodePudding

Below I've pasted my code to show dependencies according to the documentation, along with the imports in my main.js. Finally, I've tried a lot of different ways of using the icons in my Footer.vue component, but they don't show up. When inspecting the element in the browser, they show up as < !---->and I can't find a solution to this.

I have also tried removing the brackets around the import of FontAwesomeIcon without any luck. Does anyone know what might be going on here?

package.json

"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/vue-fontawesome": "^2.0.6",
"bootstrap-icons": "^1.7.2",
"vue": "^2.6.11",

main.js

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas);
library.add(far);
library.add(fab);

Vue.component('font-awesome-icon', FontAwesomeIcon);

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

Footer.vue

<font-awesome-icon :icon="['fas', 'phone']" />
<font-awesome-icon :icon="['fas', 'faPhone']" />
<font-awesome-icon icon="phone" />

CodePudding user response：

Your package.json is good. Your method of consuming icons in the footer is correct in the first instance:

<font-awesome-icon :icon="['fas', 'phone']" />

(I don't know if you made up those other two tags or whether you've seen them in the docs but I haven't seem icons loaded that way before - I don't believe it to be valid)

The issue is your imports of the icons. Suggest importing only phone and adding icons as you use them rather than trying to import all icons.

import { faPhone } from '@fortawesome/free-solid-svg-icons'
library.add(faPhone)

Because fas, fab and fas are objects containing icons, and library.add() wants one or more icons (individually), you are sending an object not an icon as the param. The docs don't show this is possible, perhaps you have seen this example elsewhere?

If you want to import multiple styles of the same icon, you can do it like this:

import { faPhone as fasPhone } from '@fortawesome/free-solid-svg-icons'
import { faPhone as farPhone } from '@fortawesome/free-regular-svg-icons'
library.add(
  fasPhone,
  farPhone
)

CodePudding user response：

I actually found a semi-answer, I would rather have them globally so I can re-use them later on. But for now, it'll have to do. I use them locally in the Footer.vue file and they work as intended.

I did this by removing the imports from main.js and imported everything directly in Footer.vue.