Vertical align font awesome icon with text within <li>
<p>I have a list that uses font awesome, hence its class is <code>fa-ul</code> :</p>

<pre><code>&lt;ul class='fa-ul'&gt;
      &lt;li class='dept'&gt;&lt;i class='fa-li fa fa-stop'&gt;&lt;/i&gt;&lt;span&gt;Management&lt;/span&gt;&lt;/li&gt;
      &lt;li class='dept'&gt;&lt;i class='fa-li fa fa-stop'&gt;&lt;/i&gt;&lt;span&gt;Something else&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The associated CSS is : </p>

<pre><code>li {
    font-size : 2em;
    margin: 1em 0;
}
</code></pre>

<p>I'd like the text and the stop-square to be vertically aligned. So far, it is not the case :</p>

<p>See screenshot:</p>

<p><img src="https://i.stack.imgur.com/vReW2.jpg" alt="See screenshot"></p>

<p>I've tried to wrap the fa-icon and the text in a <code>&lt;div&gt;</code> element with <code>vertical-align</code> property set to <code>middle</code>, without success. Thanks for helping me.</p>