Improve documentation for getting started

[sscholle]

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

  import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
  export default {
    components: {
      FontAwesomeIcon
    }
}

ERROR:

VM31702 index.js:476 Check not find one or more icon(s) 
{prefix: "fab", iconName: "font-awesome"}
iconName
:
"font-awesome"
prefix
:
"fab"

[robmadole]

Have you added the icon to the fontawesome.library?

[akinhwan]

@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

[akinhwan]

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

[robmadole]

Agreed, this needs to be improved.

[rlam3]

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>

[tophat1986]

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.

[axdyng]

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?

[robmadole]

@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.

[normelton]

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.

[paulers]

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.

[robmadole]

@paulers try <font-awesome-icon :icon="['fas', 'cog']" />. The lookup syntax is different than imports.

[paulers]

That worked, thanks! I also had to change import * as solid from '@fortawesome/fontawesome-free-solid'; to import solid from '@fortawesome/fontawesome-free-solid';

[VicoErv]

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

[robmadole]

Looks pretty solid @VicoErv. Are you getting an error?

[VicoErv]

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

[robmadole]

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.

[xeroxstar]

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

[robmadole]

@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>

[shershen08]

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

[phil-w]

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: where as you (as expected) import faSpinner. Perhaps the issue is that most people would perhaps put "faSpinner" in that icon field, not "spinner. NB!

That does however kill the other exiting JS loaded fontawesome stuff in the rest of my page... I think that's another defect....

[akuma06]

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 😄

[Aterr]

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

[robmadole]

@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)

[rSammy]

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)

[rSammy]

Now you can do <font-awesome-icon icon="whatEverIcon" />

[thanhtruong1992]

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

[vienpt]

Nuxt application

1. npm install

@fortawesome/fontawesome-svg-core
@fortawesome/free-brands-svg-icons
@fortawesome/free-regular-svg-icons
@fortawesome/free-solid-svg-icons
@fortawesome/vue-fontawesome

2. Create /plugin/font-awsome.js

• should change import { <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

3. Set plugin in nuxt.config.js

plugins: [{ src: '~/plugins/font-awesome' }]

4. Use in .vue

<font-awesome-icon icon="search" />