1 00:00:02,790 --> 00:00:06,440 Let's now move on to our next exercise, 2 00:00:06,440 --> 00:00:09,225 where we will learn more about Icon fonts. 3 00:00:09,225 --> 00:00:11,435 We will download Font Awesome, 4 00:00:11,435 --> 00:00:16,195 and then include it in our website design. 5 00:00:16,195 --> 00:00:20,800 And also we will download bootstrap social and 6 00:00:20,800 --> 00:00:27,360 design some social patents to be included in the pitch. 7 00:00:27,360 --> 00:00:35,450 To get started, go to the confusion folder in your terminal window, 8 00:00:35,450 --> 00:00:40,310 and we will use npm to go and fetch Font Awesome for us. 9 00:00:40,310 --> 00:00:49,475 So at the prompt, type npm install font-awesome minus minus save. 10 00:00:49,475 --> 00:00:53,930 So this will fetch Font Awesome into our nobody folder. 11 00:00:53,930 --> 00:01:00,825 And at the same time, it'll add Font Awesome to our package.json file as a dependency. 12 00:01:00,825 --> 00:01:02,910 Once Font Awesome is fetched, 13 00:01:02,910 --> 00:01:08,215 then we can go ahead to make use of it in our website. 14 00:01:08,215 --> 00:01:16,100 The next step is to fetch the bootstrap social and install it into our project. 15 00:01:16,100 --> 00:01:18,980 So to do that, at the prompt type npm 16 00:01:18,980 --> 00:01:27,090 install bootstrap-social@5.1.1 17 00:01:29,130 --> 00:01:31,645 minus minus save. 18 00:01:31,645 --> 00:01:37,630 And this will fetch bootstrap social and install it into our project. 19 00:01:37,630 --> 00:01:41,460 Now, we need to use this font five, 20 00:01:41,460 --> 00:01:45,760 it's the Font Awesome, and the bootstrap social in our website. 21 00:01:45,760 --> 00:01:51,485 So going to index.html right at the top, 22 00:01:51,485 --> 00:01:54,605 just before the style.css file, 23 00:01:54,605 --> 00:02:00,125 I'm going to import both Font Awesome and bootstrap social. 24 00:02:00,125 --> 00:02:04,325 So right there, let's type in link 25 00:02:04,325 --> 00:02:12,440 rel stylesheet href 26 00:02:12,900 --> 00:02:22,830 node_modules/font-awesome/css/font-awesome.main.css So let's 27 00:02:35,820 --> 00:02:45,080 import that into our index.html file similarly, 28 00:02:46,050 --> 00:02:57,380 given import the bootstrap social. 29 00:03:00,460 --> 00:03:07,760 So node_modules/bootstrap-social/bootsrap-social.css. 30 00:03:07,760 --> 00:03:13,995 So these two we will include into our index.html. 31 00:03:13,995 --> 00:03:21,960 Similarly, I need to include both these into my aboutus.html So let me copy that and move 32 00:03:21,960 --> 00:03:29,995 over to aboutus.html and then paste that into the aboutus.html also. 33 00:03:29,995 --> 00:03:37,180 Now, getting back to index.html we are not going to make use of the Font Awesome icons, 34 00:03:37,180 --> 00:03:43,060 and also the bootstrap social icons in our index.html page. 35 00:03:43,060 --> 00:03:48,485 Going to that navigation bar in the index.html page, 36 00:03:48,485 --> 00:03:53,770 right in this link for their homepage, 37 00:03:53,770 --> 00:03:59,840 I'm going to go in and add that Font Awesome code. 38 00:03:59,840 --> 00:04:06,430 So I'll say span class fa fa-home. 39 00:04:06,430 --> 00:04:10,615 So the fa says that I'm applying the Font Awesome class, 40 00:04:10,615 --> 00:04:14,550 fa home is the specific icon for the home icon. 41 00:04:14,550 --> 00:04:18,215 Thus so that is what I wanted to use on my homepage. 42 00:04:18,215 --> 00:04:26,190 And then close the span tag- and then after the space, the home button. 43 00:04:26,190 --> 00:04:30,265 So that will include the home icon in there. 44 00:04:30,265 --> 00:04:36,945 I'm going to copy this and then for the about, 45 00:04:36,945 --> 00:04:42,895 I'm going to use the same thing but instead of fa-home, 46 00:04:42,895 --> 00:04:46,610 so notice give a space between the closing span tag and 47 00:04:46,610 --> 00:04:51,100 about and instead of fa-home I would say fa-info. 48 00:04:51,100 --> 00:04:55,280 Now these, I have figured out that these are the icons that I want to use. 49 00:04:55,280 --> 00:05:00,110 You can check out the Font Awesome documentation to find 50 00:05:00,110 --> 00:05:04,820 out which particular icons and how you include them. 51 00:05:04,820 --> 00:05:09,610 For menu I will use a list icon there. 52 00:05:09,610 --> 00:05:15,840 I call that icon as fa-list. 53 00:05:15,840 --> 00:05:20,400 Now, also I'm going to use larger sized icons. 54 00:05:20,400 --> 00:05:23,160 So I will also include fa-lg 55 00:05:23,160 --> 00:05:32,890 into the icon classes fa-lg. 56 00:05:32,890 --> 00:05:39,345 Now for contact I am going to use fa-home, 57 00:05:39,345 --> 00:05:49,095 and then if this is fa-address-card fa-lg and save the changes. 58 00:05:49,095 --> 00:05:51,465 You should repeat the same, 59 00:05:51,465 --> 00:05:56,220 addition of the same icons even in aboutus.html page, 60 00:05:56,220 --> 00:06:01,880 and then we'll take a look at our web page after we complete the changes. 61 00:06:01,880 --> 00:06:09,350 After modifying also aboutus.html and index.html including the icons, 62 00:06:09,350 --> 00:06:14,675 I have saved the changes and then here I am at my web page and note 63 00:06:14,675 --> 00:06:21,150 how these icons got included into my navigation bar. 64 00:06:21,150 --> 00:06:24,890 So you can see that there is a home icon in front of home, 65 00:06:24,890 --> 00:06:27,885 there is an info icon in front of about, 66 00:06:27,885 --> 00:06:32,525 a list icon in front of menu and an address card icon in front of contact. 67 00:06:32,525 --> 00:06:39,195 So this is a nice way of adding some visual elements into your web page. 68 00:06:39,195 --> 00:06:40,800 Now, this is wonderful. 69 00:06:40,800 --> 00:06:47,590 Now what I want to do is now work on updating the footage. 70 00:06:47,590 --> 00:06:53,250 Now, I want to replace the telephone fax and email with icons and 71 00:06:53,250 --> 00:06:59,370 also turn all these into social media buttons here. 72 00:06:59,370 --> 00:07:03,810 So to do that, we're going to make use of Font Awesome for this, 73 00:07:03,810 --> 00:07:08,440 and then we're going to make use of bootstrap social for this. 74 00:07:08,440 --> 00:07:11,720 Going to the footer of the index.html page, 75 00:07:11,720 --> 00:07:19,610 I'm going to replace the telephone with Font Awesome icon. 76 00:07:19,610 --> 00:07:22,930 So I would say, "i" as I mentioned, 77 00:07:22,930 --> 00:07:29,130 you can either use span or I for specifying the Font Awesome icons. 78 00:07:29,130 --> 00:07:34,820 Font Awesome website uses I but I'm showing you two possible ways of doing these things. 79 00:07:34,820 --> 00:07:41,230 So I say fa fa-tel, 80 00:07:41,230 --> 00:07:52,260 I'm sorry fa-phone and close the tag here. 81 00:07:53,270 --> 00:07:58,985 And for fax, I'm going to simply copy this, 82 00:07:58,985 --> 00:08:07,550 and then for fax if it is fa-fax, 83 00:08:07,550 --> 00:08:17,705 and for email it is fa-envelope and save changes. 84 00:08:17,705 --> 00:08:24,485 Now apply the same to the aboutus.html page. 85 00:08:24,485 --> 00:08:26,210 Going to my web page, 86 00:08:26,210 --> 00:08:29,765 you immediately notice that the telephone, fax, 87 00:08:29,765 --> 00:08:34,420 and email, are now replaced with the corresponding icons. 88 00:08:34,420 --> 00:08:37,735 Now the last step is to use bootstrap social to replace 89 00:08:37,735 --> 00:08:41,550 all these links with the social media buttons. 90 00:08:41,550 --> 00:08:43,350 To get that done, 91 00:08:43,350 --> 00:08:47,835 we'll go to the footer and then replace each of 92 00:08:47,835 --> 00:08:53,400 these with their corresponding icons there. 93 00:08:53,400 --> 00:08:57,345 So I would say, i class 94 00:08:57,345 --> 00:09:06,545 Font Awesome fa-google-plus and 95 00:09:06,545 --> 00:09:09,255 close the tag there. 96 00:09:09,255 --> 00:09:16,170 And then I'm simply going to copy this and then apply the same to the remaining ones. 97 00:09:16,170 --> 00:09:21,660 So I will say, Facebook, 98 00:09:28,330 --> 00:09:38,400 LinkedIn, Twitter, 99 00:09:44,910 --> 00:09:51,860 YouTube, and finally for mail I'm going to 100 00:09:51,860 --> 00:09:59,865 use an envelope icon there. 101 00:09:59,865 --> 00:10:07,250 In addition, to turn this into bootstrap social patents to the A tags, 102 00:10:07,250 --> 00:10:16,150 we should apply the classes as button button-social icon, 103 00:10:16,150 --> 00:10:24,870 and then button-google doing the same to the remaining ones. 104 00:10:24,870 --> 00:10:30,255 For the second one it would be Facebook, 105 00:10:30,255 --> 00:10:38,690 then LinkedIn, 106 00:10:44,970 --> 00:10:52,370 Twitter, Google and then for the last one, 107 00:10:52,370 --> 00:11:02,985 since we don't have a corresponding bootstrap social icon button for the mail, 108 00:11:02,985 --> 00:11:08,130 we won't have anything except button social icons. 109 00:11:08,130 --> 00:11:13,170 Now with this, let's go and take a quick look at our footer. 110 00:11:13,170 --> 00:11:16,720 Going to your footer, you can now see all the buttons have 111 00:11:16,720 --> 00:11:20,505 been turned into their corresponding social buttons there. 112 00:11:20,505 --> 00:11:25,720 Let's do the same change to the footer in aboutus.html. 113 00:11:25,720 --> 00:11:33,125 So I'm just copying that code there and then going to aboutus.html, 114 00:11:33,125 --> 00:11:41,675 and then simply replacing that in the footer of aboutus.html. 115 00:11:41,675 --> 00:11:46,415 With that let's take one final look at our web page. 116 00:11:46,415 --> 00:11:48,050 Going to our web page, 117 00:11:48,050 --> 00:11:49,635 you can see that now 118 00:11:49,635 --> 00:11:56,030 all the social media links there have been turned into social media buttons there. 119 00:11:56,030 --> 00:11:58,945 Going to the about page, 120 00:11:58,945 --> 00:12:03,660 you'll see the same thing in the about page also. 121 00:12:03,660 --> 00:12:07,340 Now that you've completed this exercise, 122 00:12:07,340 --> 00:12:16,560 this may be a good time to do a good commit with the message, icon fonts.