title: Bootstrap icon wrong positioning
body: <p>I'm new to CSS and HTML, so I got stuck on a very stupid step. The thing is that fa-list-ul icon is wrong positioned. Without <code>text-align:center</code> it positions fine. Any way to fix it? Thanks for spending your time with my problem.</p>
  
  <p>Here's the <a href="https://jsfiddle.net/fqkvv8es/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>And here is my code :
  </p>
  
  <pre><code>.player{padding:.75rem 1rem;margin-bottom:1rem;line-height:36px}
  .player_play{font-size:36px;vertical-align:middle}
  .radio_name{vertical-align:middle}
  .radio_icon{padding-right:5px;vertical-align:middle}
  .radio_select{font-size:20px;vertical-align:middle}
  </code></pre>
  
  <pre><code>&lt;nav class="player"&gt;
  &lt;div class="container"&gt;
  &lt;div class="float-left"&gt;
  &lt;i class="fa fa-play-circle player_play action"&gt;&lt;/i&gt;
  &lt;/div&gt;
  &lt;div class="radio_volume"&gt;
  &lt;i class="fa fa-volume-down"&gt;&lt;/i&gt;
  &lt;i class="fa fa-music radio_icon accent_color"&gt;&lt;/i&gt;&lt;span class="radio_name"&gt;&amp;nbsp;Anison&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="float-right"&gt;
  &lt;i class="fa fa-list-ul radio_select action"&gt;&lt;/i&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>