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:
- Add the Glyphicon Home icon to the Home nav item by placing a
spantag 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> - Save this and refresh your browser. If all goes well, you should see your icon appear!
- If your icon does not appear, check the following things:
- Are the Glyphicon fonts in the fonts folder?
- Is the
@icon-font-pathvariable set properly in your_variables.lessfile? The@icon-font-path:"../fonts/";path is working for me.
- Assuming that all is working, let's press on and add icons to each of the other nav items. Here are the remaining span elements and classes I'll use, in this order, for Portfolio, Team, and Contact.
<span class="glyphicon glyphicon-picture"></span> <span class="glyphicon glyphicon-user"></span> <span class="glyphicon glyphicon-envelope"></span>
- Save and refresh. You should get the following result for all computer screen sizes:
- And, in the collapsed responsive navigation:
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.