Vertically centering Font Awesome icon inside nav

debugcn Published at Dev

Sam

I'm trying to make the icon vertically centered so it would align with the rest of the nav links but I can't seem to get it to work no matter what I try.

HTML

<nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <img src="img/logo.png" class="navbar-brand" href="index.html">
        </div>
        <div class="collapse navbar-collapse" id="nav">
          <ul class="nav navbar-nav navbar-left">
            <li><span class="fa fa-phone"> +62 202 555 0117</span></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>

CSS

nav.navbar {
padding: 12px;
}
span.fa.fa-phone {
    color: #fff;
    vertical-align: middle;
}

Gleb Kemarsky

Navbar's links have padding: 15px property. So you need to apply this property to the phone number.
Make special class for this purpose. Use

<li class="phone"><span class="fa fa-phone"></span> +62 202 555 0117</li>

instead of <li><span class="fa fa-phone"> +62 202 555 0117</span></li>.
Use <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt=""></a>
instead of <img src="img/logo.png" class="navbar-brand" href="index.html">
The toggle-button has to use the id from <div class="collapse navbar-collapse" id="nav"> as the value of the data-target property.

Please chaeck the result. Is it what you want to achieve?

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

.navbar {
  padding: 12px;
}
.nav .phone {
  color: #fff;
  padding: 15px;
}

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt=""></a>
    </div>
    <div class="collapse navbar-collapse" id="nav">
      <ul class="nav navbar-nav navbar-left">
        <li class="phone"><span class="fa fa-phone"></span> +62 202 555 0117</li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Collected from the Internet

Please contact [email protected] to delete if infringement.