- [Instructor] Let's go ahead and install another library.
I want to use the pretty awesome Font Awesome library,
which you can find at this url.
And it has a bunch of free icons
that you can use in your projects
and so you can see here that there is a ton of them,
and we're going to use a few for this application.
In order to install them,
we have already added the different modules in NPM
but we don't really call them
within the libraries themselves.
This is another library
that I want to be available inside my different components,
so I'm going to use main.js to import things.
First thing I need to do is import the library component
from the Font Awesome module.
So we'll do from
and this is going to be fortawesome/fontawesome-svg-core.
Let's make our window bigger here.
And you can see that visual c code
is helping me a little bit,
noticing that I am importing a library
but I'm not using it anywhere.
That's why it's grayed out like that.
And in addition to importing the library,
we'll need to import specific icons
that we want from the library.
So this is where you type in the name of your icons.
We're going to use the icons called faplus, faminus,
fatrash, and also facheck.
Now if you want to get the names of those icons,
you can do a search,
so let's do a search for trash
and you should see the icons as you search for them
come up in here.
If you click on them,
you should get something that looks like this.
Notice that they are called something like fa-trash,
but you can surmise that the names in the vue js version
are fa capital letter Trash,
they're sort of camel case with the fa being lower case.
Let's go back here and let's see,
we also need to go ahead and actually use these in here,
so we'll say library, and we'll add our icons
so we could just copy all these right here.
Paste them in here.
And we also need to make sure that we also import these
from the proper location,
so this time it's going to be the free solid svg icons.
And now everything's green.
You may want to, I sort of sometimes like to
put these together.
You can space them however you want to.
And then I'll go ahead and save that.
Now that we've imported the Font Awesome library
and then the icons that we want from the proper location,
so this is the svg versions of the icons
and we've added everything into a library.
We'll need to go into the component
that we want to use these in
and we'll need to import that as well in there.
So to do that, right after our script statement here,
we'll do an import.
Font awesome icon,
from this vue font awesome version of the library.
So now what happens with this vue font awesome
is that it creates a number of components
that you can import individually
and that means that now we're almost ready
to put them into our template.
But before we do that,
we need to add another element to this object here.
So this is going to be the components
that we want to import.
If you remember from before
when we were using the hello world component,
we had this section called components here.
This module exports some things
and one of the things that it can export is components.
You'll see that vue js
essentially uses this object to pass along
a number of elements that we can use.
So here we have the name, data, and components.
There are lots of other ones that you'll be using,
and so in this components,
we just need to identify that we're using Font Awesome icon
and then once we do that,
then we can use this other component
called font awesome icon and you can't,
you can do it like this,
or you can also use this notation
to make it a little bit easier.
And then in here, you identify the icon
that you're going to be using.
So in this case, we're going to use the plus icon
and just say add appointment here.
So let's go ahead and save that,
take a look at our application now.
And you can see that the add appointment
has the proper icon.
Let's go ahead and add a bootstrap class
margin right of two units.
That's just going to give you a little bit of breathing room
and you can see that it looks a little bit better now,
so that is how you add icons.
Once you have imported everything
at the main js,
then all you need to do is
whenever you need an icon and a component,
you have to, of course, do an import statement
then make sure that you add the font awesome icon component
into your library and then you can use this tag
to bring in any icon you need.