- [Instructor] Let's finish up our setup
by working to bring icons into our application
as well as beefing up our main page.
So in this home view right now,
we just have a welcome sign, which I guess looks okay,
but it could look a lot better.
And what I've done is create a special gist,
so we don't have to type a bunch of text here.
And you can see that,
we can hit this raw button to just copy it all,
and then we'll go back into our application
and replace the whole div right here
of the template with this.
And it's just some boiler plate text
with some really nice Bootstrap code
that makes it look good.
Now let's talk about a couple of things
that we are importing here.
You can see that we added router link classes
and we can do that even with buttons.
Bootstrap makes it really nice
by just adding a few classes to control the spacing
with these MR2, that means margin right of two units,
and then we can also make them look like buttons,
even though they're technically links
by adding these additional classes.
They still have the two attributes right here,
and everything else is just like what we did before.
Notice that we can still use normal links
if we're going outside of our existing page.
So everything else here is just basic Bootstrap code.
I did want to show you some pretty cool things,
and that is that in our application, in this app.vue file,
I'm importing Bootstrap,
and it's the SAS version of Bootstrap.
And one of the things that I don't like about Bootstrap is
their default colors.
If I want to change the default colors though,
in regular CSS, I would have to
sort of override different parts of the project.
So one of the nice things about
importing the SAS of Bootstrap,
is that I can type in one of the Bootstrap variables,
so there's a variable called primary,
and it essentially controls what the color blue looks like
in the application.
And because I'm importing the SAS version of Bootstrap,
I can just redefine what that color looks like.
So let's go ahead and just type in red here.
And now when I save,
you can see that the application
will redraw with the new colors.
And it's not just specific elements.
Everywhere that that primary color is used,
will now look red to this application.
So I don't want to really make it red,
it's a little bit extreme,
but I don't quite like the blue that it comes with.
So I'm going to type in a different color here.
So 05,
B2DD, so it makes it much easier to use your own colors,
and it also makes the Bootstrap classes
a little more useful.
The classes are usually something like primary,
secondary, danger, info,
and a lot of times your coloring,
or your using a Bootstrap class of info
just because it looks light blue like this.
When you redefine the primary color,
you're redefining essentially what the meaning of primary is
to the color that you want,
which I think is a little bit better.
And it's super easy, all you do is
add a little bit of code right here to the beginning.
You can see that it's sort of, almost like the info color,
but slightly different.
Of course you can make it whatever color you want.
So next up let's go ahead and work on importing some icons.
As I mentioned, we're using the font Awesome Library,
and we've already imported it into our project,
it's in the package.json file.
So, you can see that it actually comes in
as several dependencies, including all these pieces up here,
and this view font awesome component,
which makes it work with Vue.js.
So to do that, because we want it to be
available to all of our projects,
we're going to do this in the main.js file.
And we're going to need to import some things,
so after this router we're going to go ahead and import
library, so this item called library, from,
and here we're going to use, and these have really long names,
I'm not sure that I love that,
but we need the fontawesome-svg-core library right here.
And visual pseudocode does a nice job
of sort of pulling up the right thing.
It's also coloring it gray because I haven't used it yet,
so it's going to fix that in just a moment.
So next, I need to actually import the different icons
that I want to use in my project.
And so in here I will put in all the icons.
I'm going to just type 'em all in, so.
These are all the icons that we're going to be using.
Now you can find the list of all the icons in the
FontAwesome.com website.
now one thing is that when you import 'em,
they're going to use cabob case,
which is the first sort of word is lowercase,
and then the second word is capitalized instead of hyphens,
'cause hyphens aren't good to use sometimes in JavaScript.
So instead of fa-trash like this,
we're just going to call it faTrash.
Now when you search for the icons on the website,
you're going to see that it has the dash name
instead of this JavaScript name.
So just remember that.
So we're going to import the trash,
something called link, a list icon, with an unordered list,
and that's a lowercase L right there.
A random icon, so faRandom, undo,
the star, and an envelope for emailing things.
And then we're going to import that
from another part of the library.
So we need the free-solid-svg-icons.
So this will load the SVG version of the icons,
Font Awesome comes with a few
different versions of the icons.
So, finally we need to take the
library object that we imported,
and then go ahead and add the icons to that.
So this will be pretty much what we typed up here.
And now everything is solid instead of grayed out.
And this is pretty much it.
You just need to do this for
any icons that you want to import,
the nice thing is that they will
be available in all your sub-components.
There's a little bit of an additional import
that we have to do so we'll take care of that.
Let's go ahead and save this,
and now we're going to go into our component,
where we want to use this.
And you'll have to do this for every component.
So we'll go back into home.vue,
and if we wanted to use an icon here,
we have to go through the different
pieces of importing a component.
So we're going to import, FontAwesomeIcon from
fortawesome and then vue-fontawesome.
So that imports the component that
we're going to use on this page.
Which means that we need to add this right here.
Components,
and the component that we're going to use is FontAwesomeIcon,
and so now we can use this component wherever we want it,
and let's see, let's just put in a little star
at the end of this paragraph.
So to do that, we're just going to use the font-awesome-icon,
and make it look like a tag,
and then we just specify the name
of the icon that we want to include.
So the little prefixes, so with Font Awesome,
the icons are called like FA-star, or FAS-star,
so you can sort of ignore the beginning part of it.
And just put in star, like that.
Let's go ahead and save this,
let's take a look at our application,
and you can see a happy little star right here,
that will show up on our page.
It's pretty cool, and just like with any other component,
this is pretty cool,
you can add any classes you want in here
so you can do like text-primary,
if you wanted it to color the rest of the color,
or we could do text-danger, to make it look red again.
You can redefine what those colors are
by just changing the SAS code before you import Bootstrap.
That's important, make sure it goes before,
and it's easy enough to modify
any part of our application to include these icons,
as long as you remember to do the three different pieces.
Import the icon, add it to a components list,
and then just use the tag in our HTML.