In this video, we're going to see how to integrate those cool header icons into our application.

Go to "www.bootstrapcdn.com/fontawesome/" , and you'll see a link and a dropdown arrow. Click on this arrow, and you'll get links for different front-end programming languages.

Copy the HTML link, and paste it in our HTML file, right below the stylesheet link. Though nothing will change right away, it'll give us access to use different icon classes.

Next, go to "www.fontawesome.io" and click on an option called "icons" that is located in the navigation header. This will bring up a list of icons for you, and from this list, choose the ones you like. The good thing about these icons is they are fonts, and this makes them less buggy in programming. A decade ago, all icons were images, so there were always problems with rendering and resizing, but tools like Font Awesome have made it easier to work with icons.

From the list, click on the icon you want, and this should take you to the page that has the icon link. Copy this link and paste it in the nav-buttons id, like this:

<div id="nav-buttons">
  <a href="#"><i class="fa fa-bars" aria-hidden="true"></i></a>
  <a href="#">User</a>
  <a href="#">Chat</a>
</div>

Likewise, do it for users and chat icons too.

<div id="nav-buttons">
  <a href="#"><i class="fa fa-bars" aria-hidden="true"></i></a>
  <a href="#"><i class="fa fa-user" aria-hidden="true"></i></a>
  <a href="#"><i class="fa fa-commenting" aria-hidden="true"></i></a>
</div>

The output looks like this:

Though they are not styled the way we want, the icons are nevertheless there.