Member Avatar for mmcdonald

Hi all,

I'm trying to use add-on icons for my form filds (see very bottom: )

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 -->
  • 2 Contributors
  • 3 Replies
  • 290 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by james chaco

Dani AI

Generated

Short diagnosis and steps that address the three common causes when icons render elsewhere but not inside a Bootstrap navbar: wrong icon set for the Bootstrap version, missing/blocked icon assets or overridden icon rules, and invalid HTML structure that breaks the navbar DOM.

Bootstrap version and classes

  • Confirm which Bootstrap is in use. Bootstrap 2 used icon-* classes (sprite-based); Bootstrap 3 switched to glyphicon glyphicon-* (font-based). An upgrade without changing the icon classes will make icons vanish. Use the browser inspector to check whether .icon-home (or the equivalent class) actually has a background-image or font-family rule applied.

Assets and CSS overrides

  • Check the Network tab for missing sprite/font files and open bootstrap.css to verify icon rules exist. Also search stylesheets for broad resets that might remove background images or force i { background: none; } — that will hide sprite icons.

Markup and placement

  • As pointed out, input add-ons belong on inputs. The navbar form should be a sibling of the <ul class="nav"> inside .nav-collapse, not a child of the UL. The original snippet contains mismatched/extra closing tags and a <form> placed inside a <ul>, which can break rendering and prevent icons from showing.

Example (valid structure; adapts to Bootstrap 2 icon classes):

<div class="nav-collapse">
  <ul class="nav">
    <li><a href="#"><i class="icon-home"></i> Home</a></li>
    <li><a href="#"><i class="icon-check"></i> Pricing</a></li>
  </ul>

  <form class="navbar-form pull-right">
    <input type="text" class="span2" placeholder="Email">
    <button class="btn">Login</button>
  </form>
</div>

Quick troubleshooting checklist

  • Verify Bootstrap CSS loaded (contains icon rules).
  • Confirm icon assets (sprite/font) return 200 in Network tab.
  • Inspect the <i> element in DevTools to see computed background-image or font-family.
  • Fix any malformed HTML (unclosed tags, form inside UL).

Tying back: ’s icons-in-links approach is fine; combine that with the valid structure above and confirm the correct icon class set for the Bootstrap version in use.

Recommended Answers

All 3 Replies

Member Avatar for james chaco

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

Edited by james chaco
commented: unrelated? +0
Member Avatar for 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

Member Avatar for 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.:)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.