Adding icons

It's time to add icons to our navigation. We'll begin by employing the Glyphicons that come with Bootstrap. Then, we'll shift to the larger library of icons offered by Font Awesome.

Note

Take a moment to review the relevant Bootstrap documentation at: http://getbootstrap.com/components/#glyphicons.

You'll see the set of icons available and the markup convention for using these in your HTML using span tags and glyphicon classes. We'll start by adding a home icon to our Home nav item:

1. Add the Glyphicon Home icon to the Home nav item by placing a span tag with appropriate classes within the nav item link and before the text:

   <li class="active">
     <a href="index.html">
       <span class="glyphicon glyphicon-home"></span> Home
     </a>
   </li>

   Tip

   I've added a space after the span tag to provide a bit of space between the icon and the text Home.

2. Save this and refresh your browser. If all goes well, you should see your icon appear!

   

3. If your icon does not appear...