DEV Community

How to setup Font Awesome 5 as VueComponent in Nuxt.js

Alexandru Bucur on January 06, 2018

There were a couple of things that I needed to understand in Nuxt.js so hopefully this will make it quicker for other people as well To have a gl...
Collapse
 
phouvanhkcsv profile image
Phouvanh Kongchansavath • Edited

Hi Alexandru

How to only add some icons? Because i do not want to add full set, i want to use different icons in different categories.

Thanks.

Edited:
Got it, with this for example:
import { faAngleDoubleDown } from '@fortawesome/fontawesome-pro-regular'

Collapse
 
goviedo profile image
Gonzalo Oviedo Lambert

Thanks Alexandru, but the content lack of important things like.

You have to install fontawesome libray, something obvious but all need explicity.

2) Where is the vue-component?, do you create it?, it is implicit?.

And what is brand, never hear of it.

3) If i use vuetify, how do i use it?

Collapse
 
mandaputtra profile image
Manda Putra

Got this errors,

Cannot read property 'name' of undefined

from this line
Vue.component(FontAwesomeIcon.name, FontAwesomeIcon)

If I removed the name the icon wont show

Collapse
 
coolgoose profile image
Alexandru Bucur

@protokol0 they've changed the setup a little bit on newer versions.

Collapse
 
joselo profile image
Jose Carrion • Edited

Thanks for sharing this!!

I prefer to use in this way:



<font-awesome-icon icon="plus"/>
Collapse
 
sabahang profile image
Saba Ahang

Any idea how to add my own custom icons to the library?

Collapse
 
coolgoose profile image
Alexandru Bucur

Just keep them separate from font-awesome. I don't see why you would need to add them to the library itself.

Collapse
 
creativiousa profile image
Amirul Asyraf Mohamed Azam

Hi Sir, how do I assign the font awesome under the tag for example { icon: &#39;fas fa-drafting-compass&#39;, text: &#39;Custom Order&#39;}, </p>

Collapse
 
coolgoose profile image
Alexandru Bucur

Not sure what you mean unfortunately.