Bootstrap - How to use icons in lists/tabs?

Question

I'm trying to get a couple of effects in Twitter Bootstrap but I'm struggling, and I'm sure it must have been done before. Both are quite similar so I've rolled into a single question.

What I want to do is get Icons working within both a list and a navbar. A quick illustration of each effect I'm trying to achieve via a bit of painting:

List

enter image description here

<div class="well span4">
   <ul class="nav nav-list">
       <li class="active"><a href="#">Value 1</a></li>
       <li><a href="#">Value 2</a></li>
       <li><a href="#">Value 3</a></li>
   </ul>
</div>

I have tried including <img> and <span> and <div> all with the class="close" but none seemed to work properly, the nearest I could get to was having them display on the next line.

Nav Bar

enter image description here

<div class="navbar">
        <div class="navbar-inner">
            <div class="container" style="width: auto;">
                <a class="brand" href="#">NavBar</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="divider-vertical"></li>
                        <li class="active">
                            <img src="edit.png" width="16" height="16"/>
                            <a href="#">Nav 1</a>
                        </li>
                        <li>
                            <img src="play.png" width="16" height="16"/>                               
                            <a href="#">Nav 2</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

What I want here is to display the two icons beside the navbar items (and within the active region for the first navbar item). Similar sort of problem as the list, the image gets pushed above this time. I've photoshopped the Nav2 to illustrate the effect I want to achieve.

I've tried <img>, and I did try an <i> but I believe these are magic somehow and always point to some sort of glyph icons - I need to go read about these. What I really want is to use use custom images here.

Any suggestions / little examples would be great. Thanks.

score 25 · Accepted Answer · edited Dec 19 '14 at 11:05

I have used fontawesome icons which are better than images .

The syntax to use icons in bootstrap is to use tag with a class name icon- . BY default glyphicons are present in bootstrap but fontawesome has more icons and is completely free . You can know more about font-awesome here :http://fortawesome.github.com/Font-Awesome/#integration

This is how you can create your navigation and lists with icons :

Jsfiddle for you http://jsfiddle.net/shail/GKsSd/2/

for Lists :

     <div class="well span4">
       <ul class="nav nav-list">
         <li class="active"><a href="#">Value 1 <i class=" icon-remove pull-right"></i></a>  </li>
         <li class="active"><a href="#">Value 2 <i class=" icon-remove pull-right"></i></a></li>
         <li class="active"><a href="#">Value 3 <i class=" icon-remove pull-right"></i></a></li>
      </ul>

Result in browser : nav and list with icons For navigation you can do the similar :

<div class="navbar">
<div class="navbar-inner">
 <a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar">
  <i class="icon-bar"></i>
   </a>

 <a class="brand" href="">New Icon Menu</a>

    <div class="nav-collapse">
        <ul class="nav nav-pills pull-right">
            <li><a href=""><i class="icon-home icon-2x"></i> Home<br></a>
            </li>
            <li><a href=""><i class=" icon-pencil icon-2x"></i>About Us</a>
            </li>
            <li><a href=""><i class=" icon-briefcase icon-2x"></i>Portfolio</a>
            </li>
            <li><a href=""><i class=" icon-envelope icon-2x"></i>Contact Us</a>
            </li>
        </ul>
       </div>
       </div>
    </div>

Just in case you desperately need to use images. You will have to create classes and put the icon image inside it . Like following :

 .icon-edit {
     background:url('/images/edit.png') 0 0 no-repeat;
     height: 16px;
     line-height: 16px;
     width: 16px;
     }

Thanks for the font-awesome stuff, I will be sure to take a look at that a bit later. I've discovered that actually your code didn't work initially, and put it down to the bootswatch style that I'm using... — Ian, Feb 26 '13 at 11:10
wat issue are you having it implemented . If you can throw a test page .. I can render more help . Cheers ! — Shail, Feb 26 '13 at 11:11
Here's a JSFiddle http://jsfiddle.net/IPWright83/K9kUg/ of the example uncollected provided, using the cerulean bootswatch theme. — Ian, Feb 26 '13 at 11:25
The fiddle of yours is not working since the glyphicons are not loading . Working example of ur jsfiddle http://jsfiddle.net/shail/K9kUg/2/ . — Shail, Feb 26 '13 at 11:34
To make your jsfiddle work .. load css files from adding them into resources section , which is on the left side . Add — Shail, Feb 26 '13 at 11:36
Yeah thanks... locally I realised I need to download the glyphs, though as soon as I get a chance I'm going to look at the font-awesome stuff. — Ian, Feb 26 '13 at 13:12
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/25156/discussion-between-shail-and-ian) — Shail, Feb 26 '13 at 13:14

score 6 · Answer 2 · answered Apr 25 '15 at 13:24

For Bootstrap 3 you can do something like this using the glyphicons which are included with Bootstrap...

List group with icons:

<div class="list-group">
    <a href="#" class="list-group-item active">Active item <i class="glyphicon glyphicon-camera pull-right"></i></a>
    <a href="#" class="list-group-item">Second item <i class="glyphicon glyphicon-envelope pull-right"></i></a>
    <a href="#" class="list-group-item">Third item <i class="glyphicon glyphicon-chevron-right pull-right"></i></a>
</div>

Tabs with icons..

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home <i class="glyphicon glyphicon-dashboard"></i></a></li>
    <li><a href="#">Tab1 <i class="glyphicon glyphicon-tree-conifer"></i></a></li>
    <li><a href="#">Tab2 <i class="glyphicon glyphicon-fire"></i></a></li>
</ul>

or, stacked nav with icons..

<ul class="nav nav-tabs nav-stacked">
     <li><a href="#">One <i class="glyphicon glyphicon-remove pull-right"></i></a></li>
     <li><a href="#">Two <i class="glyphicon glyphicon-remove pull-right"></i></a></li>
     <li><a href="#">Three <i class="glyphicon glyphicon-remove pull-right"></i></a></li>
     <li><a href="#">Four <i class="glyphicon glyphicon-remove pull-right"></i></a></li>
</ul>

Codeply snippets: http://codeply.com/go/E0R4MTFrFS

Bootstrap - How to use icons in lists/tabs?

2 Answers2