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...
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).
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 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>
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.
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 class="fa-stack fa-2x">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></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.
Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.
