‫Hey, dad.
‫Welcome back.
‫Now in this lecture, let us discuss about these awesome icons and how we can add them.
‫Remember, these are not images, these are icons and we can treat them like font.
‫We can increase their own size.
‫Add some color effect and do a lot of thing.
‫So these are basically icons, but we can treat them as font.
‫How to get them?
‫So there are several providers we can use on Dawson than there is by Google itself.
‫There are several companies who provide this type of want.
‫So if we jump on this icon, you will see multiple type.
‫Maybe if you want, maybe for Twitter, you can just directly search and you will get different Twitter
‫icons.
‫There are different others.
‫You can do anything.
‫You can search about them and directly use on your project.
‫We are going to do something similar.
‫So the first thing is you need to add a free account to sign in and then let me jump on to create an
‫account on how you just need to add your email address.
‫Let me quickly do that and then come back.
‫Now, once you have somebody email, you will get some message like this as well as you will have a
‫confirmation email.
‫Just click here, your emails confirm.
‫And how you will have information about password.
‫And you can skip remaining details once that is done, you will have option how to utilize this whole
‫thing.
‫So all you have to do is utilize this, get in your code and then you have the option to utilize all
‫these styles.
‫Remember, you need to add this and your heard section.
‫And if you have any confusion, you can just click here and this will help you to inform where you exactly
‫need to add inside your head.
‫I disagree last.
‫But let me jump here.
‫Copy this one.
‫Get back to my HDMI inside my head, and let me add it here.
‫Save this one and remember, this is a JavaScript file, so this is going to take some load.
‫Once that is done, all we need to do is just search the icon that we want.
‫So let me jump here.
‫And let me start with the icon, which is LinkedIn.
‫So I searched LinkedIn here.
‫Maybe if I need to use this, click here.
‫And I will have a quick word to use to on.
‫So that said, so what I'm going to do is jump back to my file and I need to add after my button.
‫So what I'm going to do is I'm going to create a section and I'm going to call this our social.
‫And inside this, Deb, I'm going to add all of them.
‫So the first one, I'm going to ask this.
‫Let me copy this one.
‫Yeah.
‫So this is the first one now I can add something similar, so if I saw about Twitter, this is going
‫to be Twitter itself.
‫So something like this will be my Twitter.
‫If you jump here, such about Twitter.
‫And if you open this one.
‫You can see this is true.
‫So they have actually used common terms, so maybe if I want to add Instagram, then I want to add GitHub
‫and then I want to add YouTube.
‫I can do that and just use Instagram and then GitHub.
‫And then you do, and if any of them is not walking, just jumper and such about the exact quote unquote.
‫OK, so that's done in Mumbai.
‫Here we are dependent on this item as well as this class.
‫Remember this class names are important, and that's where this genes come into picture.
‫So if you use anything else, it will not work.
‫It may get back here.
‫Now I can close this, I hope you got the idea you can utilize, just visit it on Gotham dot com and
‫you can utilize it.
‫That's done.
‫Get backyard.
‫So we have this icon, you can see pretty small.
‫What I can do is I can select this option.
‫Then I dug and then increase the size.
‫Now, my social connection should be above my skin.
‫So if you jump here, this is skill and I'm adding my social health, so that first thing I'm going
‫to do is I'm going to select my dog directly and change their phone size.
‫1.8M.
‫Also, you can select either directly or you can select social first and then I.
‫Since we might use different icons.
‫So I think it's better to have focus targeted selectors in the system.
‫But if you see currently we don't have any hardware, we don't have anything else.
‫Why we need to add links to each one of them so we can have.
‫Maybe if I want to jump onto YouTube, I can do that.
‫Maybe if I want to jump onto Instagram, I can do that.
‫So for that, I need to add links.
‫And if by any chance you haven't followed me on Instagram or any other social media, I strongly recommend
‫to do that.
‫OK, this is the first setting.
‫The other thing I want to do is.
‫I want to have them all align at the center, so if I right click here.
‫And this is Deb, and these are all the elements so I can utilize fixed a line at center and everything
‫will be at the center.
‫What I'm going to do is I'm directly going to select my social.
‫That is my debate.
‫And then you text align center, jump back in, that's done.
‫But I need to add spaces between them.
‫What I can do is individually select them and add some margin.
‫So get back here.
‫And this is where I need to add margin.
‫So I have selected my dog and dolphin motorbike, Mike and I want them, as well as they have been right.
‫Zero point four Them come back here much better.
‫OK.
‫This is looking exactly the same.
‫Yeah, there is some margin setting that I need to add here, rest.
‫Everything is better.
‫So the first thing I need to add here is about the length.
‫So what we can do is we can utilize AirTags.
‫So all I have to do is just add AirTag before them.
‫So this will be a trap and I need to cut this here and had I need to add the tag also, I need to use
‫target underscore blank.
‫So you open things on new page.
‫So what I can do is I can copy this one and then click here.
‫Click on Old.
‫Click Here, click here.
‫Click here.
‫And this is where I can based and control things in one single click Save in my face.
‫Now you can see the difference again if I need to remove this AirTag.
‫Use all key.
‫Click here.
‫Click Click here.
‫And let them delete.
‫Copy this one.
‫Click here on all the places where I want to paste this saved list.
‫I haven't had any links to no.
‫We have added on eight dogs, so if I jump here you can see things are popular now and why things are
‫purple because you feel no links are by default bubble and we need to color them.
‫We need to change their color.
‫But before that, let me quickly are there links?
‫So what I have to do is I have to copy paste.
‫The best thing I can do is just quickly add them in.
‫Fast forward more.
‫That's done, I have included these links, and after saving, they have systematically formatted,
‫so that's done.
‫Now the other problem that I'm currently facing is this purple color.
‫What I can do is I can just directly jump here and then change this color.
‫That should work fine and had if I go with color, if maybe four demo covers, let me save this color,
‫then knock here and it's working fine.
‫But the problem head is I wanted the fall color, so what I can do is I can just inherit the default
‫color.
‫That means the color the parent is falling so best always from my side will be just select the attack
‫by default at the top.
‫And how you can set the color as in headed.
‫So that means whatever they are inheriting, they will utilize them.
‫So by default, they were inheriting this color.
‫They are now utilizing this.
‫The other problem was underlined.
‫So if you remember, all the attacks have underlined what you can utilize this ex decoration because
‫we don't need an underlined.
‫Use text decoration and then save this one.
‫Now and the lines are also gone, and the other thing by the chain that we want is about this color,
‫our color.
‫So what we can do is we can select each individual element and then add our effect.
‫So after my social head, I can directly just access each individual element, so maybe I want to access
‫Lingnan so I can do that and then add specific color, whatever the Lingnan logo colors.
‫So let me copy this one.
‫And let me select Lingnan, and then I just need to add color.
‫So jump on to LinkedIn now and copy the color.
‫You can either visit each website individually or just search about the logo, and then you can select
‫their colors or just click on this and then hover over the color that you want.
‫So maybe this is the blue color that I want, and then I can add it here.
‫So I've already copied the Lindeman color.
‫I can be stood here directly.
‫And if I save this one now here, remember, I'm adding Lingnan on the normal state, that means the
‫normal setting is on LinkedIn itself.
‫What I need is how it works.
‫I'm going to use Howard S..
‫Now you can see it's happening.
‫So I just need to repeat this with everyone.
‫I already have them, so I can be certain, but you need to do it individually.
‫Why?
‫Because we have different color for Twitter, Instagram, GitHub as well as YouTube jumper.
‫And now you see, it's working.
‫Now the only thing remaining is these margins as well as batting.
‫So we'll be completing this project in the next lecture and also talk about the code and few other stuff.
‫I hope they know you have understood everything in the next lecture.
‫Let us discuss about the remaining part.
‫Thank you for calling and I see you guys in the next one.