CODEWITHSUNDEEP
htmltwitter-bootstrapfont-awesome
Michael
Michael

Reputation: 6907

Font-awesome icon not appearing in Bootstrap navbar

I am trying to place a Font-awesome icon in the navbar near the about link, but it is not showing up.

Here is the included Bootstrap and Font-awesome files

 <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" media="screen">
  <link rel="stlyesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" media="screen">

Here is the Bootstrap navbar

    <!-- Navbar -->
    <div class="navbar navbar-default navbar-static-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand text-muted" href="#">ASDF</a>
          <div class="collapse navbar-collapse">
            <div class="navbar-right">
              <button type="button" class="btn btn-default navbar-btn btn-success">Register</button>
              <button type="button" class="btn btn-default navbar-btn btn-primary">Log In</button>
           </div>
            <ul id="navbarLinks" class="nav navbar-nav navbar-right">
              <li><a href="#">Discover</a></li>
              <li><a href="#">Merchants</a></li>
             <!-- ********************************************* -->
             <!-- ********************************************* -->
             <li><a href="#">About</a><span class="fa fa-question"></span></span></li>
             <!-- ********************************************* -->
             <!-- ********************************************* -->
              <li class="dropdown">
                <a data-toggle="dropdown" data-target="#" href="#">Resources<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Support</a></li>
                  <li><a href="#">Blog</a></li>
                </ul>
              </li>
            </ul>
          </div> <!-- collapse navbar-collapse -->
        </div><!-- container -->
       </div><!-- navbar-inner -->
    </div>
    <!-- End Navbar -->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Upvotes: 4

Views: 9515

Answers (1)

AyB
AyB

Reputation: 11675

Your anchor tag has the css property:

display:block;

So when you place the icon after the anchor tag, the 'About' takes the full block of space and displays the icon below instead. To solve this, you could simply include the icon within the anchor tag.

<li><a href="#">About <span class="fa fa-question"></span></a></span></li>

This is how it looks when you do it:

DEMO

Upvotes: 5

Related Questions