Font-Awesome stack not working correctly?

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> <i></i> <i></i> </span> 

This code doesn't:

 <span> <i></i> <i></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).

5 Answers

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> <i></i> <i></i> </span> 

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> <i></i> <i></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> <i></i> <i></i> </span> 

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

To get it to work as I expected it to, I changed font-awesome CSS file. At line 168, it looks like this:

.fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } 

Notice that the stack only has 1x & 2x options. So I added a 3x & 4x.

.fa-stack-1x, .fa-stack-2x, .fa-stack-3x, .fa-stack-4x { position: absolute; left: 0; width: 100%; text-align: center; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-stack-3x { font-size: 3em; } .fa-stack-4x { font-size: 4em; } 

You may have to tweak a bit more to get it to line up just right. The higher the em's go, the less they line up correctly in different browsers.

But, in the end, I ended up using a border because we wanted to do something different on phone sizes, and it was simpler to edit that CSS in the @media queries.

The class fa- thin-circle-seems to only support 2x, use CSS (font-size)

.dimensioni_fix { font-size: 40px; /* EDIT THIS */ } 

It may not solve your problem but is this the kind of effect you are looking to create?

<span> <i></i> <i></i> </span> 

Because font-awesome clearly specifies 1-x and 2-x for stacking and then using larger parent classes for bigger stacks.

From:

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.