Search code examples
vue.jsfont-awesomevuepress

fontawesome error "Could not find one or more icon"

I followed https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs.

But when use it like:

import { library } from '@fortawesome/fontawesome-svg-core'
import { faBars } from '@fortawesome/free-solid-svg-icons'
import { faTwitter, faFacebook, faStackOverflow, faGithub } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

...

library.add(faBars, faTwitter, faFacebook, faStackOverflow, faGithub )
Vue.component('font-awesome-icon', FontAwesomeIcon)

...

<font-awesome-icon icon="twitter" class="icon alt"/>

Got:

Could not find one or more icon(s) {prefix: "fas", iconName: "twitter"}

Solution

  • free-brands-svg-icons use the fab prefix (docs don't appear to mention this, had to check its folder in node_modules), which you have to specify:

    <font-awesome-icon :icon="['fab', 'twitter']" class="icon alt"/>

    When non specified, fas prefix is assumed.

    CodeSandbox: https://codesandbox.io/s/6j833qp57k