Stacking Icons about vue-fontawesome HOT 6 CLOSED

Having a dive into the source files you can import the layers gubbins like this

import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
...
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('font-awesome-layers', FontAwesomeLayers)

In your component

<font-awesome-layers>
  <font-awesome-icon icon="circle" />
  <font-awesome-icon icon="check" style="color: white;" transform="shrink-6" />
</font-awesome-layers>

It'd be nice to be added to the readme, I'll quickly create a PR

from vue-fontawesome.

Also, you could add the sizing to font-awesome-layers

<font-awesome-layers class="fa-2x">

Or each individual icon

from vue-fontawesome.

Thanks for the docs @silverbackdan

from vue-fontawesome.

Whenever I use

<fa-layers class="fa-4x">
    <fa :icon="['fas', 'camera']" style="color: white;"/>
    <fa :icon="['fas', 'ban']" style="color: red;" transform="shrink-6" class="fa-2x"/>
</fa-layers>

it'll look like this:

It's not centered on top of each other and it doesn't look the same as described in the docs (like camera is fully visible in the docs but in my case it's still too large): https://fontawesome.com/docs/web/style/stack
Any ideas how to fix this?

from vue-fontawesome.

Whenever I use

<fa-layers class="fa-4x">
    <fa :icon="['fas', 'camera']" style="color: white;"/>
    <fa :icon="['fas', 'ban']" style="color: red;" transform="shrink-6" class="fa-2x"/>
</fa-layers>

It's not centered on top of each other and it doesn't look the same as described in the docs (like camera is fully visible in the docs but in my case it's still too large): https://fontawesome.com/docs/web/style/stack Any ideas how to fix this?

I had this when I was using vue3/nuxt3. I had to import FontAwesomeLayers in the /plugins/fontawesome.ts file and create the component like so:

// For Nuxt 3
import { config, library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false

// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fas, fab)

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
  nuxtApp.vueApp.component('font-awesome-layers', FontAwesomeLayers)
})

only then my stacked icons started working....

from vue-fontawesome.

Whenever I use

<fa-layers class="fa-4x">
    <fa :icon="['fas', 'camera']" style="color: white;"/>
    <fa :icon="['fas', 'ban']" style="color: red;" transform="shrink-6" class="fa-2x"/>
</fa-layers>

It's not centered on top of each other and it doesn't look the same as described in the docs (like camera is fully visible in the docs but in my case it's still too large): https://fontawesome.com/docs/web/style/stack Any ideas how to fix this?

I had this when I was using vue3/nuxt3. I had to import FontAwesomeLayers in the /plugins/fontawesome.ts file and create the component like so:

// For Nuxt 3
import { config, library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false

// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fas, fab)

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
  nuxtApp.vueApp.component('font-awesome-layers', FontAwesomeLayers)
})

only then my stacked icons started working....

This is my code:

import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fas } from '@fortawesome/free-solid-svg-icons';

library.add(far, fas);

export default function(app) {
    app.component('fa', FontAwesomeIcon);
    app.component('fa-layers', FontAwesomeLayers);
}

But whenever I add config.autoAddCss = false, all icons are way too big and some icons are missing. It breaks everything.

from vue-fontawesome.