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).
25 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.
3The 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.
1
