Bootstrap Glyphicons on Badges

Badges' appearances can be enhanced by adding Glyphicons. This can be done in two ways:

• Nesting a span class.glyphicon within a span class.badge
• Creating a span class group .badge..glyphicon, although this does not give the best appearance.

The screen shot below shows a navigation with badges and Glyphicons:

The Home item on the navigation has a nested span class.glyphicon inside span class .badge.

The Messages item on the navigation also has a nested span class.glyphicon inside span class .badge.

The Notification item on the navigation, on the other hand has combined classes .badge and .glyphicon on a span. The icon did not display clearly.

The code for the navigation is listed below:

    <ul class="nav nav-pills">
        <li><a href="#"><span class="badge"><span class="glyphicon glyphicon-home"></span></span> Home</a></li>
        <li class="active"><a href="#">Messages <span class="badge"><span class="glyphicon glyphicon-pencil"></span> 10</span></a></li>
        
        <li><a href="#">Notification  <span class="badge glyphicon glyphicon-info-sign">15</span></a></li>
    </ul>

Need help on some web coding task? Let me know about it. Email me at jrwxpun.dolor@gmqoapmssail.co57agsblm and I'll be more than happy to blog about it with my thoughts.

Hosting of the sample pages were provided for by the following:

• http://www.freescripthost.com/
• http://freewebhostingarea.com/