CODEWITHSUNDEEP
buttontwitter-bootstrapnavbar
Josslin
Josslin

Reputation: 21

replace icon-bar in bootstrap navbar with other icons

i'm trying to replace the three bars in the navbar button, which appears, when navbar collapses.

The original code is:

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

i tried to the following instead, but it did not work:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-envelope"></span>

        </a>

can anybody help please?

Upvotes: 2

Views: 15726

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25495

You can replace what's inside the navbar toggle button with anything you like, including different icons or text. Here's a working example with the envelope icon:
http://jsfiddle.net/panchroma/RWPdu/

You'll see there's nothing unusual in the HTML, so if it still doesn't work for you you could start by checking that glyphicons are correctly installed by testing an icon in the page body.You could also check that it's not a color issue -- eg white text on a white background.

Good luck!

<div class="navbar">
<div class="navbar-inner">
<div class="container">

  <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

      <span class="icon-envelope"></span>
  </a>

  <!-- Be sure to leave the brand out there if you want it shown -->
  <a class="brand" href="#">Project name</a>

  <!-- Everything you want hidden at 940px or less, place within here -->
  <div class="nav-collapse collapse">
    <!-- .nav, .navbar-search, .navbar-form, etc -->
  </div>

 </div>
 </div>
 </div>

Upvotes: 4

Related Questions