title: glyphicon and text links on different lines
body: <p>I'm trying to design a dropdown menu with Glyphicons on Rails 4.0.0 using Bootstrap 3.0.2. However, the Glyphicons and the texts with links don't show up on the same line. Here is my code:</p>
  
  <pre><code>&lt;li class="dropdown"&gt;
      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; &lt;%= gravatar_for(current_user, size: 20) %&gt; &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  
      &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; 
              &lt;%= link_to "Profile", current_user %&gt;&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li&gt;
              &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-wrench"&gt;&lt;/span&gt;
              &lt;%= link_to "Settings", edit_user_path(current_user) %&gt;&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="divider"&gt;&lt;/li&gt;
  
          &lt;li&gt;
              &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-off"&gt;&lt;/span&gt;
              &lt;%= link_to "Sign out", signout_path, method: "delete" %&gt;&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Now, if I replace the links with pure text, here is my code:</p>
  
  <pre><code>&lt;li class="dropdown"&gt;
      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; &lt;%= gravatar_for(current_user, size: 20) %&gt; &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  
      &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; 
              Profile&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li&gt;
              &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-wrench"&gt;&lt;/span&gt;
              Settings&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="divider"&gt;&lt;/li&gt;
  
          &lt;li&gt;
              &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-off"&gt;&lt;/span&gt;
              Sign Out&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Now it works perfectly.</p>
  
  <p>Could anyone please help and let me know what was done incorrectly? Thanks a lot!</p>