Using vue-font-awesome to display a facebook icon in a Vue CLI application

Question

i tried this-

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

    library.add(faFacebook)

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

But apparently there's no faFacebook in free-svg-icons. How to include the facebook icon?

I answered a similar question few hours ago, check it, maybe it helps: https://stackoverflow.com/questions/51207263/fontawesome-error-could-not-find-one-or-more-icon/51208634#51208634 — yuriy636, Jul 06 '18 at 16:04

score 12 · Accepted Answer · answered Aug 29 '18 at 10:01

I faced the same problem. Solved with this:

terminal:
npm install --save @fortawesome/free-brands-svg-icons

main.js:
import { faFacebook } from '@fortawesome/free-brands-svg-icons'
library.add(faFacebook)

inside code:
<font-awesome-icon :icon="{ prefix: 'fab', iconName: 'facebook' }"/>

score 2 · Answer 2 · answered Jul 06 '18 at 15:28

check the fontawesome-free-brands for faFacebookSquare

import { faFacebookSquare, faFacebookMessenger } from '@fortawesome/fontawesome-free-brands';

does that work?

edit

just saw that faFacebookF is available there too, I just missed it

import { faFacebookF } from '@fortawesome/fontawesome-free-brands';

Using vue-font-awesome to display a facebook icon in a Vue CLI application

2 Answers2