Bootstrap - How to use icons in lists/tabs?

Ian picture Ian · Feb 26, 2013 · Viewed 67.2k times · Source

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.

Answer

Shail picture Shail · Feb 26, 2013

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