22

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"}

JustWe
  • 4,250
  • 3
  • 39
  • 90

2 Answers2

53

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

yuriy636
  • 11,171
  • 5
  • 37
  • 42
  • 3
    This is a correct answer. Except that there are _some_ documents that describe this. Upgrading from Version 4: https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4 . That describes the various style prefixes—relevant to any use of Font Awesome 5. And the README on `vue-fontawesome` discusses the Vue syntax for specifying prefixes other than the default `fas`. Here: https://github.com/FortAwesome/vue-fontawesome#the-icon-property and Here: https://github.com/FortAwesome/vue-fontawesome#why-so-explicit-the-iconfar-coffee-syntax – mwilkerson Jul 06 '18 at 21:42
  • Is there a way to globally set a prefix? For example, I never solid - I always use fal, but I don't want to type it on every icon line. – Luke Brown Jan 30 '19 at 17:48
0

I had to dig into the linked sandbox to find the answer I was looking for.

<template>
...
   <!-- For "normal" icons, do not use the prefix -->
   <font-awesome-icon icon='bars' />

   <!-- For "brands", use more verbose prop definition -->
   <font-awesome-icon :icon="['fab', 'fab-twitter']" />
...
</template>
T.Woody
  • 1,142
  • 2
  • 11
  • 25