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

<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

<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.

Answer 1

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 : 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;
     }