'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 1:[1]
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
Solution 2:[2]
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>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | yuriy636 |
Solution 2 | T.Woody |