title: Vertically centering Font Awesome icon inside nav
body: <p>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.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;img src="img/logo.png" class="navbar-brand" href="index.html"&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse" id="nav"&gt;
            &lt;ul class="nav navbar-nav navbar-left"&gt;
              &lt;li&gt;&lt;span class="fa fa-phone"&gt; +62 202 555 0117&lt;/span&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Work&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>nav.navbar {
  padding: 12px;
  }
  span.fa.fa-phone {
      color: #fff;
      vertical-align: middle;
  }
  </code></pre>