字体真棒图标堆栈问题

Question

所以使用此代码

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

在jsfiddle.net上运行正常吗？但是，一旦我尝试在我的网站上使用它，我就会遇到一个问题，即它没有堆叠。截图 - https://gyazo.com/3bbb79f81212e497a9a079ab7baf8836

如果有人可以帮助我欣赏