title: Icons appear too small on Bootstrap navbar
body: <p>How can I make the icons bigger and centered on the navbar?</p>
  
  <p>There are no CSS rules that are associated to the navbar so why don't the icons show up the same as the other elements? I've tried several things but nothing seem to work.</p>
  
  <p>in the following picture notice the icons on the right, they're not aligned with the other elements</p>
  
  <p><a href="https://i.stack.imgur.com/t20Vw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t20Vw.png" alt="notice the icons on the right, they&#39;re not aligned with the other elements"></a>  </p>
  
  <p>Code:</p>
  
  <pre><code>&lt;header&gt;
    &lt;nav class = "navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class = "container"&gt;
        &lt;div class = "navbar-header"&gt;
          &lt;a class = "navbar-brand" href = "#"&gt;
            BRAND
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;ul class = "nav navbar-nav navbar-right"&gt;
          &lt;li class = "text"&gt;&lt;a href="#"&gt;ABCD&lt;/a&gt;&lt;/li&gt;
          &lt;li class = "text"&gt;&lt;a href="#"&gt;EFGH&lt;/a&gt;&lt;/li&gt;
          &lt;li class = "text"&gt;&lt;a href="#"&gt;IJKL&lt;/a&gt;&lt;/li&gt;
          &lt;li class = "text"&gt;&lt;a href="#"&gt;MNOP&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;i class = "fa fa-facebook"&gt;&lt;/i&gt;&lt;li/&gt;
          &lt;li&gt;&lt;i class = "fa fa-twitter"&gt; &lt;/i&gt;&lt;li/&gt;
          &lt;li&gt;&lt;i class = "fa fa-instagram"&gt; &lt;/i&gt;&lt;li/&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>