React-fontawesome: Layers

[PeterKottas]

Would be nice to have layers support. I have a feeling it should be achievable, but definitely not straight forward and undocumented I assume.

[mlwilkerson]

Yes, it's on the TODO list for sure. I've been working on making available initial versions of the Ember and Angular components and thinking that it'll then be time to circle back and add layers support to the React component.

[PeterKottas]

Nice one, I guess we can keep this open then. Good luck with that, I'll be sure to check it from time to time. In the meantime, you can actually achieve this with a span and className as described in docs.

[willfarrell]

For those that would like an example:

<span className="fa-layers fa-fw">
  <FontAwesomeIcon icon={faSquare} color="green"/>
  <FontAwesomeIcon icon={faCheck} color="white" transform="shrink-6"/>
</span>

Once https://github.com/FortAwesome/react-fontawesome/pull/49 is merge you can replace color="white" for inverse. The above example reproduces faCheckSquare.

I'm happy to make a PR if others think this would be useful in the docs.

[paulxtiseo]

Anyone know why fa-layers-counter doesn't seem to work? I have the following:

<NavItem className="pr-3">
  <NavLink href="#">
    <span className="fa-layers fa-fw">
      <FontAwesome icon={["fas","newspaper"]} color="white" transform="grow-8"/>
      <FontAwesome icon={["fas","check"]} color="red" transform="shrink-3 up-8"/>
    </span>
  </NavLink>
</NavItem>
<NavItem className="pr-3">
  <NavLink href="#">
    <span className="fa-layers fa-fw">
      <FontAwesome icon={["fal","newspaper"]} color="white" transform="grow-8"/>
      <span className="fa-layers-counter">1,419</span>
    </span>
  </NavLink>
</NavItem>

Thanks to @willfarrell I can get icon-over-icon, but the counter pill seems to be incredibly and illegibly small.

[robmadole]

@paulxtiseo please post an example (codepen.io, jsbin.com, codesandbox.io) for us to take a look at.

[paulxtiseo]

You mean something on a JsFiddle or Codepen? Because I did include the block of code in my question...

[robmadole]

@paulxtiseo yep that would be great. Whatever flavor you prefer :)

[paulxtiseo]

Sorry for my ignorance here. I know how to add something like react to a codepen. But, how would I include @fortawesome/fontawesome, @fortawesome/react-fontawesome and the various icons to it? Is it available from unpkg.com?

[robmadole]

Try codesandbox.io @paulxtiseo

[paulxtiseo]

Ok, here we go: https://codesandbox.io/s/k5q2kmrzm5 ;)

Note the overlayed check (upper right) works fine, but the span with the fa-layers-counter goes hyper-miniaturized.

Also, see https://codesandbox.io/s/n5k43q7y0 for a stripped down version. This removes many nested layers as a confounding source of potential CSS conflicts.

[robmadole]

Ok @paulxtiseo. You have a grow-10 on the icon itself. Since this is a relative transform it's just out-pacing your counters text.

Try something like this:

  <span className="fa-layers fa-3x fa-fw">
    <FontAwesome icon={["fas", "newspaper"]} />
    <span className="fa-layers-counter">48</span>
  </span>

[gavinbelson]

I'm having trouble doing a transform on a non <FontAwesome/> icon. In the example below how would you specify a transform="grow-7" on the counter?

```


48

[robmadole]

@gavinbelson the counter doesn't support the transform. Sorry!

[Falci]

@gavinbelson the counter doesn't support the transform. Sorry!

But the fa-layers-text does/should.

From documentation:

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

How can we reproduce this with React?

[olidem57]

@Falci Did you find a solution to use transform with the React component ?

[Falci]

@Falci Did you find a solution to use transform with the React component ?

I did not. Just gave up.