Support for layer counters

[kotarCreative]

Is there support for layer badges within the vue components? There does not seem to be any documentation explaining how to implement badges.

[kotarCreative]

Turns out that badges can be created by adding the necessary classes to the font-awesome-layer component. Here is an example for anyone else that stumbles upon this issue before the documentation is made more robust.

<font-awesome-layers class="fa-fw fa-2x">
                <font-awesome-icon :icon="[ 'far', 'envelope' ]"></font-awesome-icon>
                <font-awesome-layers class="fa-layers-counter fa-layers-top-right">{{ notifications }}</font-awesome-layers>
</font-awesome-layers>

[robmadole]

@kotarCreative we plan on making a font-awesome-layers-text support this. Just hasn't been completed yet

[mavrick]

ETA @robmadole ?

[robmadole]

No ETA yet @mavrick

[yauri-io]

@robmadole

I can make it works like suggested by @kotarCreative

    <font-awesome-layers>
       <font-awesome-icon :icon="['fal', 'shopping-cart']"/>
       <font-awesome-layers-text
         class="text-white fa-layers-counter"
         transform=" up-4 right-20" value="3"/>
    </font-awesome-layers>

But the text inside the layer becomes ellipsis if the value > 1 char

I see it's the behavior of 'fa-layers-counter' class using overflow:hidden.

Trying to hack it through CSS and looks good :D

<font-awesome-layers class="fa-layers fa-fw">
       <font-awesome-icon :icon="['fal', 'shopping-cart']" size="2x"/>
       <font-awesome-layers-text
         class="text-white fa-layers-counter custom-layer-counter"
         transform=" up-6 right-32" :value="totalItems"/>
    </font-awesome-layers>

  .custom-layer-counter {
    overflow: visible;
    width: fit-content; // this may not working with IE 😩
  }

[dudedigital]

This really needs to be completed. This repo is growing stale. @robmadole mentioned they'd be making a component 9 months ago and Vue only continues to grow in popularity. I'd love to see some action on this as a supporter since Kickstarter.

[Loremaster]

Any updates on adding fa-layers-counter into vue-fontawesome?