All language subtitles for 8. Start Icon

In the last lecture, we have integrated font awesome into our application in this lecture, we will

just do tiny change.

You will change the icon for the star icon and will improve stylings.

OK, so let's start and first, let's find out how we can, how we can find out the icon itself.

How can we find out what we can import here?

OK, so when you are in the main Dodgers and then you will hold your command or a control key?

OK, so this will change the cursor.

You can inspect the package itself.

So whenever you hold a command in my case, or if you only control key, you can enter the file so I

can hold it and I can press the file.

I can scroll down to get some of the icons I'm looking for.

Let's hold a control on the name of the font.

Awesome icon, OK?

Oh, actually, I'm in the wrong.

I was clicking here.

I want to click here on the free select SPG icons.

OK, so hold the comment that I control.

Click here and you have all of the icons that are defined here as you can use.

OK?

As you can see, all of these icons are prefixed with the FAA.

If a vials of a video and so on, that's all of the icons we have available from this package phase

solid SPG icons in this case.

Very important user secret.

So go back to your browser and let's go up here.

Here should be a link to the icon.

So let me find it.

There should be some there here.

Visit Font.

Awesome.

Dot com slash icon.

So let's click here.

Well, let's actually spend it on YouTube so that we have still this package accessible.

I will just call it back down here.

Look like you right click on this icon an open link in a YouTube.

All right, so here's all the icons you can see here on the left side, you have a select icons, the

regular ones.

I guess we can only use the summit and the regular the free ones of the other ones are not.

Or maybe also brands are and you are also free are maybe all of them are free.

Here is just only as you can see.

But what I am looking here for is the icon of the user secret, right?

So use their dark secret and if any, to search for it, you can find it here.

You can see this other ones are pro, so that's not accessible for me, but they can access these.

But these are dark secret and I look at this.

You can find here some information about it is it is the Soviet style icon.

Soviet style industrial icons we are importing can see you have a solid right and it has a prefix of

face.

OK.

This means of font.

Awesome.

Solid.

OK.

And here is the list is basically class.

But when you are using normal font awesome package, if you will use it with the view, it's a little

bit different.

But that's some of the information so you can read from here.

So it's easier for you to find this package in here.

OK, in the free side SPG icons, you know all of these icons here.

So I wanted to show you here, actually is that whenever I go to exchange list, you really find here

icon here, we can also provide you explicitly that this this icon from some from the Soviet icons,

because these are just implicitly saying we want to import use our secret or it will find us automatically.

But they can also explicitly say, but they will go back here, it will scroll down.

I will need to find it here and say that they want to import this user a secret from the face, from

font awesome Soviet icon.

So that's why you know that they are related here.

I can see it's a very slight icon if s click if you want to import it more explicitly.

OK, but we will not use it.

We will just simply specify our user secret.

That's also the one way, such as to the right user user Typekit secret.

But what I want to tell here by this is that the way we are going to find our custom icon.

So let's go back and let's throw for some star icon.

All of this faded icons of thought.

We don't care about them.

But here is this story here the first one?

Let's click at this.

You will find out that this is also part of the solid styles so we can use it and it's prefix with.

It's a as icon.

So what I going to do?

Go back.

You're cold now.

Let's go to a mental J.S. simply, if you want, you can search for this icon in your very solid SPG

icons or just straight away.

I come back here if a.

Efforts there, and yeah, that's exactly what I'm looking for.

All I got is icon, and I owe it to the library.

So I cannot use my secret user agent any longer, but I can use a star icon so I will go to the exposure

list and instead of a user secret here, I specify we just simply right here star.

And that's it.

Nobody will save it.

Go to Bhavsar, go to your application that you should see here, icon, but it's still not very visible,

so we are going to change the color of it and also maybe we'll change also sizing.

OK, so let's do it.

Back here in our front also.

First, I will I will wrap it into its own diff container so I can provide a custom styling so that

her diff.

And if in the end, let's wrap it like this and let's put your custom class and the class will be exchange

icon, exchange Dutch icon and specify the stylings done in the styles field here.

So about your extension, I could, and now we can specify their custom styling, and all of these guys

are already prepared for you.

So don't worry about it.

OK, let's read your color.

Color will be Dash F, f b c and a c.

Like this i this this or this, this orange color you can see here.

Let's say.

To refresh, and yeah, that's our that's our goal.

If you want to also play here a bit of styles here, I guess we could we could do that because I think

it's not a complete circle, as you can see.

Yeah, we can do that.

We can ride the extra Jekyll and Hyde, by the way.

You don't need to know exactly the stylings of this.

Just check out all my other guides and I'm explaining this phalanx and HTML or checks some tutorials

because it's not really part of the core styling, and that'll be another adding it often.

I'm just doing it now so we can improve the icon.

OK, so get your height and the width of the 25 pixels likes to jack.

Let's see.

OK, now it's circular.

OK, but it's not in the middle.

So what are they are going to do?

The simplest way is just simply for me to display your flex stylings and the content that is Flex and

you want to center everything inside into the center.

You will just buy the line items to the center and also justify content to the center, and it will

center the item inside of this container in the middle.

Like these when you will save it and now it should be in the middle.

Yes, now you have a perfect circle.

A very visible one, we can play with the static later, but for now, I am quite OK with this.

So that's going to be the guys that I can search.

You know how to search the icons for yourself if you need so and you know the way, how are you integrating

font?

Also, our closest to tabs will continue in the next lecture with more stuff.

Yes.