Let's now move on to our next exercise, where we will learn more about Icon fonts. We will download Font Awesome, and then include it in our website design. And also we will download bootstrap social and design some social patents to be included in the pitch. To get started, go to the confusion folder in your terminal window, and we will use npm to go and fetch Font Awesome for us. So at the prompt, type npm install font-awesome minus minus save. So this will fetch Font Awesome into our nobody folder. And at the same time, it'll add Font Awesome to our package.json file as a dependency. Once Font Awesome is fetched, then we can go ahead to make use of it in our website. The next step is to fetch the bootstrap social and install it into our project. So to do that, at the prompt type npm install bootstrap-social@5.1.1 minus minus save. And this will fetch bootstrap social and install it into our project. Now, we need to use this font five, it's the Font Awesome, and the bootstrap social in our website. So going to index.html right at the top, just before the style.css file, I'm going to import both Font Awesome and bootstrap social. So right there, let's type in link rel stylesheet href node_modules/font-awesome/css/font-awesome.main.css So let's import that into our index.html file similarly, given import the bootstrap social. So node_modules/bootstrap-social/bootsrap-social.css. So these two we will include into our index.html. Similarly, I need to include both these into my aboutus.html So let me copy that and move over to aboutus.html and then paste that into the aboutus.html also. Now, getting back to index.html we are not going to make use of the Font Awesome icons, and also the bootstrap social icons in our index.html page. Going to that navigation bar in the index.html page, right in this link for their homepage, I'm going to go in and add that Font Awesome code. So I'll say span class fa fa-home. So the fa says that I'm applying the Font Awesome class, fa home is the specific icon for the home icon. Thus so that is what I wanted to use on my homepage. And then close the span tag- and then after the space, the home button. So that will include the home icon in there. I'm going to copy this and then for the about, I'm going to use the same thing but instead of fa-home, so notice give a space between the closing span tag and about and instead of fa-home I would say fa-info. Now these, I have figured out that these are the icons that I want to use. You can check out the Font Awesome documentation to find out which particular icons and how you include them. For menu I will use a list icon there. I call that icon as fa-list. Now, also I'm going to use larger sized icons. So I will also include fa-lg into the icon classes fa-lg. Now for contact I am going to use fa-home, and then if this is fa-address-card fa-lg and save the changes. You should repeat the same, addition of the same icons even in aboutus.html page, and then we'll take a look at our web page after we complete the changes. After modifying also aboutus.html and index.html including the icons, I have saved the changes and then here I am at my web page and note how these icons got included into my navigation bar. So you can see that there is a home icon in front of home, there is an info icon in front of about, a list icon in front of menu and an address card icon in front of contact. So this is a nice way of adding some visual elements into your web page. Now, this is wonderful. Now what I want to do is now work on updating the footage. Now, I want to replace the telephone fax and email with icons and also turn all these into social media buttons here. So to do that, we're going to make use of Font Awesome for this, and then we're going to make use of bootstrap social for this. Going to the footer of the index.html page, I'm going to replace the telephone with Font Awesome icon. So I would say, "i" as I mentioned, you can either use span or I for specifying the Font Awesome icons. Font Awesome website uses I but I'm showing you two possible ways of doing these things. So I say fa fa-tel, I'm sorry fa-phone and close the <i> tag here. And for fax, I'm going to simply copy this, and then for fax if it is fa-fax, and for email it is fa-envelope and save changes. Now apply the same to the aboutus.html page. Going to my web page, you immediately notice that the telephone, fax, and email, are now replaced with the corresponding icons. Now the last step is to use bootstrap social to replace all these links with the social media buttons. To get that done, we'll go to the footer and then replace each of these with their corresponding icons there. So I would say, i class Font Awesome fa-google-plus and close the <i> tag there. And then I'm simply going to copy this and then apply the same to the remaining ones. So I will say, Facebook, LinkedIn, Twitter, YouTube, and finally for mail I'm going to use an envelope icon there. In addition, to turn this into bootstrap social patents to the A tags, we should apply the classes as button button-social icon, and then button-google doing the same to the remaining ones. For the second one it would be Facebook, then LinkedIn, Twitter, Google and then for the last one, since we don't have a corresponding bootstrap social icon button for the mail, we won't have anything except button social icons. Now with this, let's go and take a quick look at our footer. Going to your footer, you can now see all the buttons have been turned into their corresponding social buttons there. Let's do the same change to the footer in aboutus.html. So I'm just copying that code there and then going to aboutus.html, and then simply replacing that in the footer of aboutus.html. With that let's take one final look at our web page. Going to our web page, you can see that now all the social media links there have been turned into social media buttons there. Going to the about page, you'll see the same thing in the about page also. Now that you've completed this exercise, this may be a good time to do a good commit with the message, icon fonts.
