title: Font Awesome social icons stacked in Bootstrap navbar
body: <p>I am building a Bootstap navbar that has 2 social media icons on the left, and a phone number on the right. My social icons are ending up stacked vertically, instead of positioned horizontally. Here is my code:</p>
  
  <pre><code> &lt;nav class="navbar navbar-static-top navbar-inverse"&gt;
          &lt;a class="navbar-brand" href="#"&gt;Project name&lt;/a&gt;
          &lt;ul class="nav navbar social"&gt;
              &lt;li class="nav-item active"&gt;
              &lt;a class="nav-link" href="https://www.facebook.com/account?ref=hl" target="_blank" onclick="ga('send', 'event', 'link', 'click', 'Facebook Social Clicks');"&gt;
                  &lt;span class="fa-stack fa-lg"&gt;
                    &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
                    &lt;i class="fa fa-facebook fa-stack-1x fa-inverse"&gt;&lt;/i&gt;
                  &lt;/span&gt;
              &lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li class="nav-item active"&gt;
              &lt;a class=""nav-link" href="https://twitter.com/account" target="_blank" onclick="ga('send', 'event', 'link', 'click', 'Twitter Social Clicks');"&gt;
                  &lt;span class="fa-stack fa-lg"&gt;
                    &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
                    &lt;i class="fa fa-twitter fa-stack-1x fa-inverse"&gt;&lt;/i&gt;
                  &lt;/span&gt;
              &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>