Font awesome icon stack issue
<p>So using this code</p>

<pre><code>&lt;li&gt;&lt;a href="https://8ball.gg/"&gt;&lt;i span class="fa-stack fa-2x"&gt;
    &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
      &lt;span class="fa fa-stack-1x" style="color:black;"&gt;
          &lt;span style="font-size:40px; margin-top:-20px;"&gt;
              8
          &lt;/span&gt;
    &lt;/span&gt;
    &lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
</code></pre>

<p>on jsfiddle.net works fine? But once i try and use it on my site i get a problem where its not stacked. screenshot - <a href="https://gyazo.com/3bbb79f81212e497a9a079ab7baf8836" rel="nofollow">https://gyazo.com/3bbb79f81212e497a9a079ab7baf8836</a></p>

<p>If someone can help id appreciate</p>