Font-Awesome stack not working correctly?

Question

Weird problem with Font Awesome. I'm trying to make a larger circle around my social media icon.

If I change the first stacked icon to a size larger than 2x, it reverts back to the 1x size.

This code works:

  <span class="fa-stack fa-lg">
    <i class="fa fa-circle-thin fa-stack-2x"></i>
    <i class="fa fa-facebook fa-stack-1x"></i>
  </span>

This code doesn't:

  <span class="fa-stack fa-lg">
    <i class="fa fa-circle-thin fa-stack-3x"></i>
    <i class="fa fa-facebook fa-stack-1x"></i>
  </span>

If I use 3x or 4x, etc, the lower image gets set back to the normal size. Is this a bug, or am I doing something wrong here?

Using Font Awesome v 4.1.0.

EDIT - because this note keeps getting views / comments. My problem was that font-awesome only has the 1x and 2x proportions, where I wanted a much larger background image and a smaller icon (at more like like 4x).

Answer 1

This confused me too until I re-read the instructions a few times:

"You can even throw larger icon classes on the parent to get further control of sizing."

So you leave the icons alone and simply swap .fa-lg for .fa-2x on the parent and the child icons grow proportionately.

<span class="fa-stack fa-2x">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>

Answer 2

Fairly old solution and lots of similar comments above but wanted to tell one thing I ended up doing in case anyone encounters a similar thing. I needed the the outer font to be the regular size and the inner to be smaller. I didn't feel like creating a class for this since it's only used in a single place. I ended up just adding a style class to the inner font.

<span class="fa-stack">
<i class="fa fa-comment-o fa-stack-1x"></i>
<i class="fa fa-plus fa-stack-1x" style="font-size:9px"></i>
</span>

If you have a 1 off that you need something similar then you could consider the above or create additional classes to do it if you are using in lots of places. If I were to create classes, I would had done something similar to (untested)

fa-stack-xs {font-size:.6em}
fa-stack-sm {font-size:.8em}

So, they could be used like

<span class="fa-stack">
<i class="fa fa-comment-o fa-stack-1x"></i>
<i class="fa fa-plus fa-stack-1x fa-stack-sm"></i>
</span>

I didn't see in the documentation anything like this so my apologies if I missed it.