Twitter Bootstrap - Using icons in .nav

[mmcdonald]

Hi all,

I'm trying to use add-on icons for my form filds (see very bottom: http://twitter.github.com/bootstrap/base-css.html#icons)

The thing is, add-on works great on my page but won't work in my nav.

Any ideas?

My code:

<div class="navbar navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container" style="width: auto">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a>
              <a class="brand" href="#" style="padding-left: 80px;">Digishout Training</a>
              <div class="nav-collapse">
                <ul class="nav">
                  <li class="divider-vertical"></li>
                  <li><a href="#"><i class="icon-home"></i> Home</a></li>
                  <li class="divider-vertical"></li>
                  <li><a href="#"><i class="icon-check"></i> Pricing</a></li>
                  <li class="divider-vertical"></li>    
                  <li><a href="#"><i class="icon-envelope"></i> Support</a></li>
                  <li class="divider-vertical"></li>
                </ul>
                <ul class="nav pull-right">
          <li class="divider-vertical"></li>
          <li><a href="/users/sign_up"><i class="icon-pencil"></i> Sign Up</a></li>
          <li class="divider-vertical"></li>
          <form class="navbar-form pull-left">
              <input type="text" class="span2">
              <input type="password" class="span2">
              <button type="submit" class="btn">Login</button>
          </form>
          <li class="divider-vertical"></li>
        </ul>
        </div>
      </div>
    </div>
                </ul>
              </div><!-- /.nav-collapse -->
            </div><!-- /.container -->
          </div><!-- /navbar-inner -->
        </div><!-- /navbar -->

[james chaco]

i guess wrapping input elements in div with input-prepend class as shown in link provided by you will do the needful.

[mmcdonald]

Hi james. This is in regards to using <i class="icon-pencil"></i> and other span icons in nav forms? Or is that what you've pout and I'm missing the ort

[james chaco]

No i was talking about following code:

          <div class="input-prepend">
             <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
          </div>
          <div class="input-prepend">
            <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
          </div>

Please correct me if i am wrong in understanding your problem.:)