CODEWITHSUNDEEP
laraveltwitter-bootstrapvue.jsfont-awesomefont-awesome-5
Toti Cuervo
Toti Cuervo

Reputation: 285

FontAwesome Icons not stacking correctly

I am working on a project using Laravel and VueJs. I am wanting to stack some FontAwesome icons together, but for whatever reason they are not responding as expected.

To test this, I copied the example under layering, text, and counters exactly from the FontAwesome page. Here is how I expect them to look like: enter image description here

However, when I run it on my system the icons look like this: enter image description here

Here is the code that is in my component:

<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>

Again, I copied it straight from the FontAwesome documentation. What could be the problem?

Upvotes: 0

Views: 2039

Answers (1)

zmag
zmag

Reputation: 8251

Linked page you gave tells what you need to use it.

Heads Up!

This feature requires that you use our SVG + JS version of Font Awesome.

So you need to import JS file of Font Awesome.

<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>

Upvotes: 2

Related Questions