Question

我正在使用Laravel和VueJs进行项目。我想将一些FontAwesome图标堆叠在一起，但是无论出于何种原因，它们都无法像预期的那样响应。

为了测试这一点，我将示例完全从FontAwesome page复制到了分层，文本和计数器下。我希望他们看起来像这样：

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

这是我组件中的代码：

<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版本的Font Awesome 。

因此，您需要导入Font Awesome的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>

FontAwesome图标无法正确堆叠

1 个答案: