Closed sscholle closed 6 years ago
Have you added the icon to the fontawesome.library
?
@robmadole like this? Below is my main.js file in my vue-cli init webpack template project
import Vue from 'vue'
import App from './App'
import fontawesome from '@fortawesome/fontawesome'
import brands from '@fortawesome/fontawesome-free-brands'
import { faSpinner } from '@fortawesome/fontawesome-free-solid'
fontawesome.library.add(brands, faSpinner );
Vue.config.productionTip = false
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
I'm getting an Uncaught Reference Error to 'FontAwesomeIcon' in my component Do I still need to import again from @fortawesome/vue-fontawesome in the component even after following the instructions in the npm docs https://www.npmjs.com/package/@fortawesome/vue-fontawesome
I think the documentation on the npm package page could be clearer. I particularly had issues understanding the latter portion where it explains library configuration. I followed the code exactly and it has not worked as the "basics" portion has for me.
"It can be tedious to always import the icons individually so a library can be configured and shorthand can be used when rendering the icon.
Define a library that can be used without explicit imports:"
Agreed, this needs to be improved.
Any updates on the new documentation / tutorial? I'm having a similar issue when integrating with nuxt js. Thanks.
nuxt.config.js
[
'qonfucius-nuxt-fontawesome',
{
componentName: 'fa-icon',
packs: [
{
package: '@fortawesome/fontawesome-free-solid'
},
{
package: '@fortawesome/fontawesome-free-brands'
}
]
}
],
'@nuxtjs/google-adsense'
],
fontAwesome: {
packs: [
{
package: '@fortawesome/fontawesome-free-brands'
},
{
package: '@fortawesome/fontawsome-free-solid'
}
]
},
<template>
<header>
<nav>
<ul class="nav-container">
<li>
<nuxt-link to="/">
Home
<fa-icon pack="fas" name="spinner" />
</nuxt-link></li>
<li><nuxt-link to="/">Home<Icon type="home" /></nuxt-link></li>
</ul>
</nav>
</header>
</template>
<script>
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
export default {
name: 'CustomHeader',
components: {
FontAwesomeIcon,
}
}
</script>
The NPM guide doesn't highlight for some reason that you also have to also install via NPM the -
npm install --save @fortawesome/fontawesome-free-solid
npm install --save @fortawesome/fontawesome-free-brands
npm install --save @fortawesome/fontawesome-free-regular
Because the import examples need to import it from the node_modules folder, it's going to be required that you actually have it installed! I know it's simple to overcome but is inconsistent and kind of necessary to be in the readme.
So how can i vue.use('fontawesome') in my main.js like other plugins? I followed the documentation, however i still have to import FontAwesomeIcon in all the components that i want to use icons.
Is there a cleaner way?
@dysol this package is not a plugin (it would need to have an install
hook for that). It's just a component.
In you App.js
or similar place you can register a component Vue.component('font-awesome-icon', FontAwesomeIcon)
and then use it everywhere in your app.
It's also important that you setup your library and get all the icons loaded BEFORE you initiate your app...
import fontawesome from '@fortawesome/fontawesome'
import faCog from '@fortawesome/fontawesome-free-solid/faCog'
fontawesome.library.add(solid)
new Vue({
el: '#app',
render: h => h(App)
})
Seems obviously, but tripped me up for a while.
I spent 30 minutes trying to get this to work, no dice. I have these packages installed:
@fortawesome/vue-fontawesome
@fortawesome/fontawesome
@fortawesome/fontawesome-free-solid
In my app.js I have the following:
import Vue from 'vue';
import App from './components/App.vue';
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
import fontawesome from '@fortawesome/fontawesome';
import * as solid from '@fortawesome/fontawesome-free-solid';
fontawesome.library.add(solid);
const app = new Vue({
el: '#app',
render: h => h(App)
});
Vue.component('font-awesome-icon', FontAwesomeIcon)
Then in my components I'm using it like this:
<font-awesome-icon :icon="['fas', 'faCog']" />
It's not throwing an exception about the component not being found or imported correctly, but I can't get the icon to render. I've tried several different ways to import the solid and also different bindings inside the element itself... at a loss now.
@paulers try <font-awesome-icon :icon="['fas', 'cog']" />
. The lookup syntax is different than imports.
That worked, thanks! I also had to change import * as solid from '@fortawesome/fontawesome-free-solid';
to import solid from '@fortawesome/fontawesome-free-solid';
any idea with vue-cli guys?
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import fontawesome from '@fortawesome/fontawesome'
import { faTwitter, faInstagram } from '@fortawesome/fontawesome-free-brands'
fontawesome.library.add(faInstagram, faTwitter)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})
sorry i'm beginner
Looks pretty solid @VicoErv. Are you getting an error?
same as above index.js:476 Check not find one or more icon(s)
, even i import it on .vue file. will try latter what happen if i assign faTwitter
or faInstagram
to this.$data
Let's see the rest of your code @VicoErv . If you can create a codesandbox.io or similar that would be the best way we could help you.
It does not work for me either, I installed everything and no icons are showing. It's even do not render after the application has been builed!!!
import fontawesome from '@fortawesome/vue-fontawesome'
export default {
name: 'App',
components:{fontawesome},
}
<template>
<div id="app"><font-awesome-icon icon="spinner" /></div>
</template>
and i get error: index.js?534b:476 Check not find one or more icon(s) {prefix: "fas", iconName: "spinner"} {}
@xeroxstar make sure you add the icon to your library before you attempt to use it.
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import fontawesome from '@fortawesome/fontawesome'
import faSpinner from '@fortawesome/fontawesome-free-solid'
fontawesome.library.add(faSpinner)
export default {
name: 'App',
components:{FontAwesomeIcon},
}
<template>
<div id="app"><font-awesome-icon icon="spinner" /></div>
</template>
I am really lost... it was a simple thing - an icon, piece of picture ... why doing all all this hell of complicated a mess out of it - https://fontawesome.com/how-to-use/use-with-node-js ? surprisingly it doesnt' work
I am usiung vue-cli webpack template project
I have following in main.js
import fontawesome from '@fortawesome/fontawesome'
import faUser from '@fortawesome/fontawesome-free-regular/faUser'
import FontAwesomeIcon from "@fortawesome/vue-fontawesome"
fontawesome.library.add(faUser)
//also tried all those in various combinations:
//import {faUser} from '@fortawesome/fontawesome-free-regular'
//import regular from '@fortawesome/fontawesome-free-regular'
//fontawesome.icon({ prefix: 'fas', iconName: 'user' })
//fontawesome.icon({ prefix: 'fas', iconName: 'user' })
//fontawesome.library.add(regular)
Vue.component('font-awesome-icon', FontAwesomeIcon)
and this markup in other component:
<i class="fas fa-user"></i>
<i class="fab fa-user"></i>
<font-awesome-icon :icon="['fa', 'user']" />
<font-awesome-icon icon="user" />
I get only error in the console, no visible icons
Same problem here. I could get the basic "fa-coffee" thing working with the computed property in a test component.
The documentation section starting "Define a library that can be used without explicit imports" doesn't seem to work. That text is missing an import of FontAwesomeIcon, which may be connected. If you put that in, then I seem to be able to make both examples (computed property - :icon, and not computed property - icon) work together in that test component.
One thing... the example includes:
That does however kill the other exiting JS loaded fontawesome stuff in the rest of my page... I think that's another defect....
The only way brand icons seem to work is to use the property :icon="['fab', 'facebook']"
. If I use the easy way: icon="facebook"
, it doesn't show up and throw a missing icon error. I don't know if it's the behavior intended (only able to use icon property for solid svgs), but if it is, the documentation should be upgraded to state it more clearly 😄
Same problem here.
Trying to add facebook icon with:
:icon="['fab', 'facebook']"
And what I get is:
Could not find one or more icon(s)
error.
Please hulp
@Aterr you need to add the Facebook icon to your library:
import { library } from '@fortawesome/fontawesome-svg-core'
import { faFacebook } from '@fortawesome/free-brands-svg-icons'
library.add(faFacebook)
Just do this
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas)
Now you can do <font-awesome-icon icon="whatEverIcon" />
Just do this
import { library } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(fas)
Thanks. I try it and working
Nuxt application
@fortawesome/fontawesome-svg-core
@fortawesome/free-brands-svg-icons
@fortawesome/free-regular-svg-icons
@fortawesome/free-solid-svg-icons
@fortawesome/vue-fontawesome
{ <prefix> }
prefix should be the same fontawsome icon: solid -> fas
; brand -> fab
import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas, fab)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
nuxt.config.js
plugins: [{ src: '~/plugins/font-awesome' }]
.vue
<font-awesome-icon icon="search" />
ERROR: