CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
aDoN
aDoN

Reputation: 1961

Bootstrap. Get icon next to li navbar

I am using this navbar:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>

I am I'm trying to place the "Home" icon next to the word "Home" and place it in the same grey block, I am doing this:

<li class="active"><a href="main.php">Home</a><i class='glyphicon glyphicon-home'></i></li>

I have tried to place it in several places without success.

Thank you in advance.

Upvotes: 0

Views: 95

Answers (1)

Dhiraj
Dhiraj

Reputation: 33628

Why not inside the anchor tag ?

<li class="active">
  <a href="main.php">Home<i class='glyphicon glyphicon-home'></i></a>
</li>

Demo: http://jsfiddle.net/dhirajbodicherla/urnb1wha/

If you want the Home icon towards the extreme right use pull-right class to the glyphicon like this 

<li class="active">
  <a href="main.php">Home<i class='pull-right glyphicon glyphicon-home'></i></a>
</li>

Demo : http://jsfiddle.net/dhirajbodicherla/urnb1wha/1/

Upvotes: 2

Related Questions