Submodule 4.1: Navigation - Icons

Open (a new if needed) terminal, and go to your Bootstrap project folder.

You can get Font Awesome using npm by typing the following at the prompt:

npm install font-awesome --save

We now need to include the CSS files for font awesome and bootstrap-social in the index.html file. Add the following code to the head:

<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">

Let us now use some font icons in our web page and decorate it. Update the navbar's ul list items as follows in index.html

View source for index.html:

The above code will create a page displayed as:

Similarly, include the CSS files for font awesome and update the navbar's ul list items as follows in aboutus.html:

View source for aboutus.html:

Next, in both index.html and aboutus.html, go down to the address in the footer of the page and replace the "Tel.", "Fax" and "Email" with the corresponding font awesome based icons as follows:

View source for address:

Finally, let us use the bootstrap-social CSS classes to create the social buttons in the footer in both index.html and aboutus.html, by replacing the social sites' links with the following code: 

View source for social media:

The above code will create a page displayed as:

Save all the changes and commit to your Git repository with the message "Icon Fonts".