-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Bootstrap Site Blueprints

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.
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:
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>
I've added a space after the span
tag to provide a bit of space between the icon and the text Home
.
Save this and refresh your browser. If all goes well, you should see your icon appear!
If your icon does not appear...