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.
