All language subtitles for 7. Font Awesome

Hello, welcome back.

In the last lecture, we have displayed exchange tags in these electoral, a hand dollar icon of the

exchange.

You can see in the image on the top right side are displaying the circle and instead a bit of the circle

is icon text.

I would like to replay this icon text with the actual icon.

For example, the star icon so I can add to the item with a wish list or its overall looks nicer.

OK, four days open your tap event to install one package, or actually it will be three packages.

But first, let's search for view that font.

Awesome.

So view and font?

Awesome.

Let's see what you'll find here.

So font awesome.

Dot com, all right.

Or other here?

Wait a second.

Let's get it back here.

Here, font.

Awesome ampm.

That's better.

OK, so let's look at this.

All right, let's take a look here waiting for a load of packages, so here's here's an introduction

of steps what you need to do in order to get icons to your applications or skip this.

We'll go straight away to installations.

So first between these two packages font awesome esprit de corps and then we need to install actually

fought awesome and then very solid as icons.

Then using veto, we need to do this about the using of your trees, only to install this package.

OK, OK, then you have also pro icons, but it is great to have that count and it also pay for it,

I guess.

And here you have a different free icons.

I no, that's also pro icons, so we don't need them.

Or actually here they are, free icons here and the icons here, OK, don't worry about that.

Now recommended the usage.

Here is how you do get the icons into your application.

OK, so let's follow step by step.

Let's go public here and we'll install these two packages.

Or here are 4000 for font awesome esprit de corps.

Let's get these one.

You'll go one by one.

Go to terminal.

You can open your tap in your folder of your application.

Make sure you are in the folder of their application, and let's press here.

Let's face it here and enter.

I look back here, I look up, it is common here.

The second one, the phrase as icons.

All right, back to Terminal, I will wait until it's finished and we'll look over this like a lot of

press enter and then the last one or get back to browser and for our view three, make sure you're selecting

View three OK here pre-release.

So selected.

Back to Terminal Killer without, so you have a better view.

Press Enter.

All right.

Everything in sounds great.

Let's see if we can you can skip over these.

We do need to be ready to install these additional ones yet.

All right.

And here.

OK, so we need to import.

Yeah, it's it's quite integration, right?

So he can see if anything for these three things here.

Let me copy it.

OK, so anything for Liberia, we need to use that.

You are importing the specific icon, you can see this is a userra secret icon.

We'll use our own icons or we would like to is a different icon.

But for now, we can go over the steps here, so I will import this.

OK, you have registered his feelings in a manner that g, so it's fine here, amend Amanda Jazz.

And let's aim for it this year.

OK, and now let's use it.

OK, so labor at the icon.

All right, like this.

And then there is something of that component, and they are studying the complaint under this name,

and that's quite obsolete because that's the explanations for a veto.

But for a view version three, it's a little bit different.

There is explanations for of your three, actually not.

Hmm.

OK.

I'll show you how you can do it in a victory.

So let me go back here, OK?

And well, they all simply do.

We'll extract a recreation of our application into its separate into the separate variable.

So what we are creating here create up.

I will do it like this electric variable.

I look it up.

And I will extract create up into this variable up.

OK, I have here instance of up and on up, I can call Mount, so upload Mount, and that's as before

the right.

But now you have it in the separate variable, so I can use it also for different functionalities.

So if you will see something like this in the documentation.

Well, we see what was in the documentation up here that they were actually saying that a component

like this, if you're not component, you will simply use the view that's part of your jazz store.

But for a few days, you will simply use that up.

That component like this and you have a their font.

Awesome.

And like this font dash also this icon and it will provide this font awesome icon here.

OK, so that's how you register this icon, and now what we have done, we have integrated that third

party icon or library also to our application so that we can access this component font that also in

our templates, in all of our templates.

OK.

We have already started it globally.

So now I have to get this font awesome icon.

All right, if you have a story for Navy ideas or you strike your user, let's take a look actually

what they are suggesting.

I want to see two steps.

They're suggesting this provide the font, awesome icon and icon to the name of the icon we have registered

because they use our dark secret.

OK, you can see here they have appeared here, very important here.

If a user secret OK, usually the name of the icon he will provide to the font awesome icon is the name

of the import with equity having bought it.

But you will leave out of the part, but you will just simply lowercase everything and you've already

used that secret.

And that will be usually also the name of your icon here.

But we'll take a look augmentation for it later in the next lecture.

For now, we want to.

We want to just follow this about just get the font awesome icon.

Let's go, Pete, let's go to your coat.

Although I will go to exchange list, I will simply.

Look at this Ikonso.

Let me see if I can, I was a soldier for icon like this.

And here you can see in the in the deep glass item feature about displaying playing this icon and this

is this is this text.

But you are displaying here in the circle here.

OK, so simply remove this text and video, this awesome also icon and an icon, is this user secret

for now?

The iconic building importing, so just recapitulate, we have installed we have installed font awesome.

That's the way how you need to do it.

You need to import the library and you need to get into the library.

You need to add the icons you can use throughout your components.

Then if you have separate instance, a lot of credit up to its own variable, so we can call here separately.

Upload component to it instead of global components so we can access are also under his name in our

template, as you can see here.

And as the icon below specified our actual icon, we can specify all the icons that are registered.

In our case, we are just registering users secret, which we can access under this name user dark secret.

But I will save it, the guys.

Let's take a look.

Let's go to Brad browser or any browser and the way I'm saying specifically name for the browser, but

you can see there is already this icon of the user doesn't look that great way to improve the static

of it.

And also they need to display a different icon.

But all of this will handle in the next lecture.

If you have any questions to initialization of this package, just ask me will continue and lecture,

so I hope to see you there.

Yes.