FontAwesome图标没有正确地堆叠

Question

我正在用Laravel和VueJ做一个项目。我想把一些FontAwesome图标堆叠在一起，但是不管出于什么原因，它们都没有像预期的那样响应。

为了测试这一点，我准确地从FontAwesome页面复制了分层、文本和计数器下面的示例。下面是我所期望的它们的样子：

​

但是，当我在我的系统上运行它时，图标如下所示：

​

下面是我的组件中的代码：

<div class="col-md-12">
    <div class="fa-4x">
        <span class="fa-layers fa-fw" style="background:MistyRose">
            <i class="fas fa-circle" style="color:Tomato"></i>
            <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
        </span>

        <span class="fa-layers fa-fw" style="background:MistyRose">
            <i class="fas fa-bookmark"></i>
            <i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
        </span>

        <span class="fa-layers fa-fw" style="background:MistyRose">
            <i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
            <i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
            <i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
            <i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
        </span>

        <span class="fa-layers fa-fw" style="background:MistyRose">
            <i class="fas fa-calendar"></i>
            <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
        </span>

        <span class="fa-layers fa-fw" style="background:MistyRose">
            <i class="fas fa-certificate"></i>
            <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
        </span>

        <span class="fa-layers fa-fw" style="background:MistyRose">
            <i class="fas fa-envelope"></i>
            <span class="fa-layers-counter" style="background:Tomato">1,419</span>
        </span>
    </div>
</div>

同样，我从FontAwesome文档中直接复制了它。有什么问题吗？

Answer 1

你给出的链接页面告诉你需要使用它。

当心！ 此功能要求您使用我们的SVG + JS版本的字体Awese。

所以您需要导入Font的JS文件。

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.min.js"></script>

<div class="col-md-12">
  <div class="fa-4x">
    <span class="fa-layers fa-fw" style="background:MistyRose">
            <i class="fas fa-circle" style="color:Tomato"></i>
            <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
        </span>

    <span class="fa-layers fa-fw" style="background:MistyRose">
            <i class="fas fa-bookmark"></i>
            <i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
        </span>

    <span class="fa-layers fa-fw" style="background:MistyRose">
            <i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
            <i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
            <i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
            <i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
        </span>

    <span class="fa-layers fa-fw" style="background:MistyRose">
            <i class="fas fa-calendar"></i>
            <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
    </span>

    <span class="fa-layers fa-fw" style="background:MistyRose">
            <i class="fas fa-certificate"></i>
            <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
    </span>

    <span class="fa-layers fa-fw" style="background:MistyRose">
            <i class="fas fa-envelope"></i>
            <span class="fa-layers-counter" style="background:Tomato">1,419</span>
    </span>
  </div>
</div>

​