I want to stack the two Font Awesome icons fa-star and fa-star-half, but I am having alignment issues. See image below:
Here is my HTML:
<span class="fa-stack">
<i class="fa fa-fw fa-lg fa-star-half fa-stack-1x"></i>
<i class="fa fa-fw fa-lg fa-star fa-stack-1x"></i>
</span>
...and my CSS:
a-stack i.fa-star {
color:transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
}
.fa-stack i.fa-star-half {
color:yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
}
Note that I do not want to use fa-star-half-o which has an unappealing design when used with an outline.
I have tried to use "float," but without success. If I use "margin-left," the spacing is off. See image below:
Any help is appreciated. Thanks!
Jesse
To stack multiple icons, use the fa-stack class on the parent HTML element of the 2 icons you want to stack. Then add the fa-stack-1x class for the regularly sized icon and add the fa-stack-2x class for the larger icon. fa-inverse can be added to the icon with the fa-stack-1x to help with a knock-out looking effect.
Instead of fa as a style preceding every icon style, you need to pick from fas for solid, far for regular, fal for light, or fab for brand. It looks like fas is the fallback, so you get solid if you leave your old fa references. For most icons, this change makes the icon heavier or lighter.
The fa-fw class is used to set icons at a fixed width. This class is useful when different icon widths throw off alignment.
Use the following margin-left
to line up the image. Check it out here: https://jsfiddle.net/f63h157x/1/
.fa-stack i.fa-star-half {
color:yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
margin-left: -5px;
}
I think all you need to do is apply a text-align: left;
to both of the <i />
elements and it should align properly without needing to use margin-left: 5px;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With