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:
span
tag with appropriate classes within the nav item link and before the text:<li class="active">
<a href="EB9781782164524_3.html">
<span class="glyphicon glyphicon-home"></span> Home
</a>
</li>
@icon-font-path
variable set properly in your _variables.less
file? The @icon-font-path:"../fonts/";
path is working for me.<span class="glyphicon glyphicon-picture"></span> <span class="glyphicon glyphicon-user"></span> <span class="glyphicon glyphicon-envelope"></span>
Not too bad.
Of course, our icons don't exactly match the icons from the mock-up. Here is what the mock-up called for:
The free version of Glyphicons provided with Bootstrap does not include icons for a computer monitor or a group of people. As we look through the available Glyphicons, we'll also find there are no icons for our social media links in the footer.
Fortunately, we have other icon options available. Let's consider one of them.