Font-awesome: fa-fw doesn't play well with fa-stack

[pupeno]

I'm not sure what would be the proper way to report this, but I tried several permutations of adding fa-fw to stacked icons and they don't play well together. The final width ends up being smaller than that of a 2x fa-fw icon because fa-stack overrides the width.

Am I missing something obvious? I'm just getting started with font awesome.

[tagliala]

could you please post a fiddle showing the issue?

[pupeno]

I created a jsfiddle for this, it's here: http://jsfiddle.net/pupeno/FqFJe/

The code is this:

<p>Single icon and stacked icon, maybe they should have the same width, they don't.</p>

<i class="fa fa-square-o fa-2x"></i>
<br/>
<span class="fa-stack">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

<br/><br/><br/><hr/><br/><br/><br/>

<p>Single icon and stacked icon, both fixed width, they should have the same width, they don't.</p>

<i class="fa fa-square-o fa-2x fa-fw"></i>
<br/>
<span class="fa-stack fa-fw">
  <i class="fa fa-square-o fa-stack-2x fa-fw"></i>
  <i class="fa fa-twitter fa-stack-1x fa-fw"></i>
</span>

[tagliala]

I don't know if they must have the same size, fa-fw and stacks are not related. I would use: http://jsfiddle.net/FqFJe/1/

<span class="fa-stack">
  <i class="fa fa-square-o fa-stack-2x"></i>
</span>
<br/>
<span class="fa-stack">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

@davegandy is this a bug?

[pupeno]

Well, I was building a menu, setting icons for each item in the menu and since it was a vertical menu I set them all to fa-fw, so they would be properly aligned. One of those items made sense to do a stack with two icons, that one was misaligned, so this feels like a bug to me, but I'm not sure.

Putting each icon into a stack, even when they are by themselves, might work, but it feels like a workaround more than a proper solution.

[cirosantilli]

+1 agree that the solution proposed by tagliala is not very elegant, and that it would be reasonable to support what pupeno wants to do.

[tagliala]

what about http://jsfiddle.net/FqFJe/2/ ?

[cirosantilli]

This solution is good as it does not lead to duplication.

I think something like that deserves a place in the library and/or examples section.

[tagliala]

http://jsfiddle.net/FqFJe/3/

.fa-stack.fa-fw {
    width: 2.5714285714285716em;
}

The magic number is 2em [fa-stack width] * 1.2857142857142858em [fa-fw width]

Needs some tests before being included in FA

This will not lead to duplicates (fa-2x.fa-fw, fa-3x.fa-fw) and will respect what fa-fw is designed for

[oshields]

Thanks @tagliala! Is there any update on this being included or is there another accepted solution?

[tagliala]

I've just noticed that this has been fixed in FA 5.5.0

Demo: http://jsfiddle.net/tagliala/foLe8rx3/