1 00:00:00,510 --> 00:00:01,140 ‫Hey, dad. 2 00:00:01,200 --> 00:00:01,920 ‫Welcome back. 3 00:00:02,220 --> 00:00:07,740 ‫Now in this lecture, let us discuss about these awesome icons and how we can add them. 4 00:00:08,250 --> 00:00:13,720 ‫Remember, these are not images, these are icons and we can treat them like font. 5 00:00:13,740 --> 00:00:15,660 ‫We can increase their own size. 6 00:00:15,900 --> 00:00:18,480 ‫Add some color effect and do a lot of thing. 7 00:00:18,870 --> 00:00:23,280 ‫So these are basically icons, but we can treat them as font. 8 00:00:23,880 --> 00:00:24,840 ‫How to get them? 9 00:00:25,680 --> 00:00:30,900 ‫So there are several providers we can use on Dawson than there is by Google itself. 10 00:00:31,230 --> 00:00:34,200 ‫There are several companies who provide this type of want. 11 00:00:34,620 --> 00:00:37,650 ‫So if we jump on this icon, you will see multiple type. 12 00:00:38,250 --> 00:00:43,710 ‫Maybe if you want, maybe for Twitter, you can just directly search and you will get different Twitter 13 00:00:43,710 --> 00:00:44,250 ‫icons. 14 00:00:44,670 --> 00:00:45,780 ‫There are different others. 15 00:00:45,790 --> 00:00:46,950 ‫You can do anything. 16 00:00:47,370 --> 00:00:51,120 ‫You can search about them and directly use on your project. 17 00:00:51,780 --> 00:00:53,310 ‫We are going to do something similar. 18 00:00:53,700 --> 00:00:59,940 ‫So the first thing is you need to add a free account to sign in and then let me jump on to create an 19 00:00:59,940 --> 00:01:03,720 ‫account on how you just need to add your email address. 20 00:01:03,750 --> 00:01:05,910 ‫Let me quickly do that and then come back. 21 00:01:06,750 --> 00:01:12,390 ‫Now, once you have somebody email, you will get some message like this as well as you will have a 22 00:01:12,390 --> 00:01:13,800 ‫confirmation email. 23 00:01:13,980 --> 00:01:16,800 ‫Just click here, your emails confirm. 24 00:01:17,930 --> 00:01:20,390 ‫And how you will have information about password. 25 00:01:27,840 --> 00:01:33,780 ‫And you can skip remaining details once that is done, you will have option how to utilize this whole 26 00:01:33,780 --> 00:01:34,140 ‫thing. 27 00:01:34,560 --> 00:01:40,020 ‫So all you have to do is utilize this, get in your code and then you have the option to utilize all 28 00:01:40,020 --> 00:01:40,680 ‫these styles. 29 00:01:41,430 --> 00:01:44,640 ‫Remember, you need to add this and your heard section. 30 00:01:44,650 --> 00:01:50,940 ‫And if you have any confusion, you can just click here and this will help you to inform where you exactly 31 00:01:50,940 --> 00:01:53,040 ‫need to add inside your head. 32 00:01:53,310 --> 00:01:54,660 ‫I disagree last. 33 00:01:55,380 --> 00:01:56,430 ‫But let me jump here. 34 00:01:56,440 --> 00:01:57,480 ‫Copy this one. 35 00:01:57,630 --> 00:02:02,790 ‫Get back to my HDMI inside my head, and let me add it here. 36 00:02:04,120 --> 00:02:08,740 ‫Save this one and remember, this is a JavaScript file, so this is going to take some load. 37 00:02:09,100 --> 00:02:13,390 ‫Once that is done, all we need to do is just search the icon that we want. 38 00:02:13,810 --> 00:02:14,950 ‫So let me jump here. 39 00:02:16,580 --> 00:02:20,150 ‫And let me start with the icon, which is LinkedIn. 40 00:02:20,600 --> 00:02:22,460 ‫So I searched LinkedIn here. 41 00:02:23,450 --> 00:02:25,730 ‫Maybe if I need to use this, click here. 42 00:02:26,870 --> 00:02:31,220 ‫And I will have a quick word to use to on. 43 00:02:31,490 --> 00:02:38,900 ‫So that said, so what I'm going to do is jump back to my file and I need to add after my button. 44 00:02:38,900 --> 00:02:44,780 ‫So what I'm going to do is I'm going to create a section and I'm going to call this our social. 45 00:02:46,160 --> 00:02:48,920 ‫And inside this, Deb, I'm going to add all of them. 46 00:02:49,400 --> 00:02:52,010 ‫So the first one, I'm going to ask this. 47 00:02:53,060 --> 00:02:54,380 ‫Let me copy this one. 48 00:02:56,070 --> 00:02:56,400 ‫Yeah. 49 00:02:56,580 --> 00:03:02,550 ‫So this is the first one now I can add something similar, so if I saw about Twitter, this is going 50 00:03:02,550 --> 00:03:04,020 ‫to be Twitter itself. 51 00:03:04,030 --> 00:03:06,270 ‫So something like this will be my Twitter. 52 00:03:07,130 --> 00:03:09,210 ‫If you jump here, such about Twitter. 53 00:03:13,250 --> 00:03:15,050 ‫And if you open this one. 54 00:03:17,130 --> 00:03:18,150 ‫You can see this is true. 55 00:03:18,360 --> 00:03:24,620 ‫So they have actually used common terms, so maybe if I want to add Instagram, then I want to add GitHub 56 00:03:24,630 --> 00:03:26,520 ‫and then I want to add YouTube. 57 00:03:26,670 --> 00:03:34,020 ‫I can do that and just use Instagram and then GitHub. 58 00:03:35,060 --> 00:03:44,330 ‫And then you do, and if any of them is not walking, just jumper and such about the exact quote unquote. 59 00:03:44,990 --> 00:03:47,420 ‫OK, so that's done in Mumbai. 60 00:03:47,920 --> 00:03:51,800 ‫Here we are dependent on this item as well as this class. 61 00:03:52,130 --> 00:03:57,620 ‫Remember this class names are important, and that's where this genes come into picture. 62 00:03:58,070 --> 00:04:00,260 ‫So if you use anything else, it will not work. 63 00:04:00,980 --> 00:04:02,090 ‫It may get back here. 64 00:04:03,140 --> 00:04:08,600 ‫Now I can close this, I hope you got the idea you can utilize, just visit it on Gotham dot com and 65 00:04:08,600 --> 00:04:09,680 ‫you can utilize it. 66 00:04:10,160 --> 00:04:10,960 ‫That's done. 67 00:04:11,480 --> 00:04:12,260 ‫Get backyard. 68 00:04:13,100 --> 00:04:15,710 ‫So we have this icon, you can see pretty small. 69 00:04:16,100 --> 00:04:18,440 ‫What I can do is I can select this option. 70 00:04:18,590 --> 00:04:21,230 ‫Then I dug and then increase the size. 71 00:04:23,600 --> 00:04:26,570 ‫Now, my social connection should be above my skin. 72 00:04:26,880 --> 00:04:33,620 ‫So if you jump here, this is skill and I'm adding my social health, so that first thing I'm going 73 00:04:33,620 --> 00:04:39,200 ‫to do is I'm going to select my dog directly and change their phone size. 74 00:04:41,060 --> 00:04:42,280 ‫1.8M. 75 00:04:43,410 --> 00:04:48,630 ‫Also, you can select either directly or you can select social first and then I. 76 00:04:49,230 --> 00:04:51,330 ‫Since we might use different icons. 77 00:04:51,930 --> 00:04:56,760 ‫So I think it's better to have focus targeted selectors in the system. 78 00:04:57,120 --> 00:05:01,210 ‫But if you see currently we don't have any hardware, we don't have anything else. 79 00:05:01,240 --> 00:05:05,340 ‫Why we need to add links to each one of them so we can have. 80 00:05:05,700 --> 00:05:08,310 ‫Maybe if I want to jump onto YouTube, I can do that. 81 00:05:08,610 --> 00:05:11,430 ‫Maybe if I want to jump onto Instagram, I can do that. 82 00:05:11,850 --> 00:05:14,190 ‫So for that, I need to add links. 83 00:05:15,290 --> 00:05:21,050 ‫And if by any chance you haven't followed me on Instagram or any other social media, I strongly recommend 84 00:05:21,050 --> 00:05:21,800 ‫to do that. 85 00:05:22,400 --> 00:05:23,800 ‫OK, this is the first setting. 86 00:05:23,800 --> 00:05:25,370 ‫The other thing I want to do is. 87 00:05:26,720 --> 00:05:30,710 ‫I want to have them all align at the center, so if I right click here. 88 00:05:31,810 --> 00:05:37,840 ‫And this is Deb, and these are all the elements so I can utilize fixed a line at center and everything 89 00:05:37,840 --> 00:05:38,950 ‫will be at the center. 90 00:05:39,850 --> 00:05:43,270 ‫What I'm going to do is I'm directly going to select my social. 91 00:05:45,150 --> 00:05:46,200 ‫That is my debate. 92 00:05:46,530 --> 00:05:51,330 ‫And then you text align center, jump back in, that's done. 93 00:05:51,570 --> 00:05:53,670 ‫But I need to add spaces between them. 94 00:05:54,060 --> 00:05:57,960 ‫What I can do is individually select them and add some margin. 95 00:05:58,680 --> 00:05:59,700 ‫So get back here. 96 00:06:00,630 --> 00:06:03,240 ‫And this is where I need to add margin. 97 00:06:03,250 --> 00:06:09,950 ‫So I have selected my dog and dolphin motorbike, Mike and I want them, as well as they have been right. 98 00:06:09,960 --> 00:06:13,720 ‫Zero point four Them come back here much better. 99 00:06:13,740 --> 00:06:14,170 ‫OK. 100 00:06:14,190 --> 00:06:16,200 ‫This is looking exactly the same. 101 00:06:19,610 --> 00:06:23,660 ‫Yeah, there is some margin setting that I need to add here, rest. 102 00:06:23,720 --> 00:06:24,860 ‫Everything is better. 103 00:06:25,310 --> 00:06:28,310 ‫So the first thing I need to add here is about the length. 104 00:06:28,350 --> 00:06:31,430 ‫So what we can do is we can utilize AirTags. 105 00:06:31,910 --> 00:06:35,420 ‫So all I have to do is just add AirTag before them. 106 00:06:35,930 --> 00:06:46,160 ‫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 107 00:06:46,160 --> 00:06:48,220 ‫target underscore blank. 108 00:06:48,230 --> 00:06:50,750 ‫So you open things on new page. 109 00:06:51,410 --> 00:06:55,700 ‫So what I can do is I can copy this one and then click here. 110 00:06:55,710 --> 00:06:56,780 ‫Click on Old. 111 00:06:56,870 --> 00:06:58,070 ‫Click Here, click here. 112 00:06:58,070 --> 00:06:58,630 ‫Click here. 113 00:06:59,010 --> 00:07:05,580 ‫And this is where I can based and control things in one single click Save in my face. 114 00:07:05,600 --> 00:07:10,160 ‫Now you can see the difference again if I need to remove this AirTag. 115 00:07:10,640 --> 00:07:11,720 ‫Use all key. 116 00:07:11,990 --> 00:07:12,570 ‫Click here. 117 00:07:12,590 --> 00:07:13,820 ‫Click Click here. 118 00:07:14,990 --> 00:07:16,790 ‫And let them delete. 119 00:07:17,810 --> 00:07:18,800 ‫Copy this one. 120 00:07:20,030 --> 00:07:25,100 ‫Click here on all the places where I want to paste this saved list. 121 00:07:25,580 --> 00:07:27,290 ‫I haven't had any links to no. 122 00:07:27,500 --> 00:07:35,150 ‫We have added on eight dogs, so if I jump here you can see things are popular now and why things are 123 00:07:35,150 --> 00:07:40,960 ‫purple because you feel no links are by default bubble and we need to color them. 124 00:07:40,970 --> 00:07:42,380 ‫We need to change their color. 125 00:07:44,030 --> 00:07:46,650 ‫But before that, let me quickly are there links? 126 00:07:46,710 --> 00:07:49,040 ‫So what I have to do is I have to copy paste. 127 00:07:49,430 --> 00:07:52,280 ‫The best thing I can do is just quickly add them in. 128 00:07:52,280 --> 00:07:53,300 ‫Fast forward more. 129 00:07:57,490 --> 00:08:03,550 ‫That's done, I have included these links, and after saving, they have systematically formatted, 130 00:08:04,210 --> 00:08:05,420 ‫so that's done. 131 00:08:05,440 --> 00:08:09,280 ‫Now the other problem that I'm currently facing is this purple color. 132 00:08:09,610 --> 00:08:14,680 ‫What I can do is I can just directly jump here and then change this color. 133 00:08:15,220 --> 00:08:22,360 ‫That should work fine and had if I go with color, if maybe four demo covers, let me save this color, 134 00:08:22,750 --> 00:08:25,000 ‫then knock here and it's working fine. 135 00:08:25,780 --> 00:08:32,980 ‫But the problem head is I wanted the fall color, so what I can do is I can just inherit the default 136 00:08:32,980 --> 00:08:33,340 ‫color. 137 00:08:35,110 --> 00:08:42,640 ‫That means the color the parent is falling so best always from my side will be just select the attack 138 00:08:42,640 --> 00:08:44,110 ‫by default at the top. 139 00:08:46,190 --> 00:08:49,100 ‫And how you can set the color as in headed. 140 00:08:51,560 --> 00:08:55,020 ‫So that means whatever they are inheriting, they will utilize them. 141 00:08:55,040 --> 00:08:57,800 ‫So by default, they were inheriting this color. 142 00:08:58,010 --> 00:08:59,390 ‫They are now utilizing this. 143 00:08:59,990 --> 00:09:02,060 ‫The other problem was underlined. 144 00:09:02,080 --> 00:09:08,540 ‫So if you remember, all the attacks have underlined what you can utilize this ex decoration because 145 00:09:08,540 --> 00:09:10,220 ‫we don't need an underlined. 146 00:09:11,560 --> 00:09:15,550 ‫Use text decoration and then save this one. 147 00:09:16,550 --> 00:09:22,210 ‫Now and the lines are also gone, and the other thing by the chain that we want is about this color, 148 00:09:22,420 --> 00:09:23,200 ‫our color. 149 00:09:23,770 --> 00:09:29,350 ‫So what we can do is we can select each individual element and then add our effect. 150 00:09:31,760 --> 00:09:40,640 ‫So after my social head, I can directly just access each individual element, so maybe I want to access 151 00:09:40,640 --> 00:09:47,030 ‫Lingnan so I can do that and then add specific color, whatever the Lingnan logo colors. 152 00:09:47,060 --> 00:09:48,350 ‫So let me copy this one. 153 00:09:49,250 --> 00:09:53,120 ‫And let me select Lingnan, and then I just need to add color. 154 00:09:54,390 --> 00:09:58,260 ‫So jump on to LinkedIn now and copy the color. 155 00:10:04,770 --> 00:10:10,950 ‫You can either visit each website individually or just search about the logo, and then you can select 156 00:10:10,950 --> 00:10:15,270 ‫their colors or just click on this and then hover over the color that you want. 157 00:10:15,660 --> 00:10:20,160 ‫So maybe this is the blue color that I want, and then I can add it here. 158 00:10:20,400 --> 00:10:22,850 ‫So I've already copied the Lindeman color. 159 00:10:22,860 --> 00:10:24,600 ‫I can be stood here directly. 160 00:10:26,260 --> 00:10:32,290 ‫And if I save this one now here, remember, I'm adding Lingnan on the normal state, that means the 161 00:10:32,290 --> 00:10:34,870 ‫normal setting is on LinkedIn itself. 162 00:10:35,260 --> 00:10:36,830 ‫What I need is how it works. 163 00:10:36,880 --> 00:10:38,920 ‫I'm going to use Howard S.. 164 00:10:40,440 --> 00:10:42,030 ‫Now you can see it's happening. 165 00:10:43,120 --> 00:10:45,760 ‫So I just need to repeat this with everyone. 166 00:10:45,880 --> 00:10:50,810 ‫I already have them, so I can be certain, but you need to do it individually. 167 00:10:50,830 --> 00:10:51,310 ‫Why? 168 00:10:51,700 --> 00:10:58,420 ‫Because we have different color for Twitter, Instagram, GitHub as well as YouTube jumper. 169 00:11:00,580 --> 00:11:02,410 ‫And now you see, it's working. 170 00:11:03,040 --> 00:11:07,030 ‫Now the only thing remaining is these margins as well as batting. 171 00:11:07,240 --> 00:11:13,960 ‫So we'll be completing this project in the next lecture and also talk about the code and few other stuff. 172 00:11:14,620 --> 00:11:18,040 ‫I hope they know you have understood everything in the next lecture. 173 00:11:18,040 --> 00:11:19,990 ‫Let us discuss about the remaining part. 174 00:11:20,830 --> 00:11:23,490 ‫Thank you for calling and I see you guys in the next one.