Stacking Font-Awesome Star Icons (fa-star & fa-star-half)

Question

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

Answer 1

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;
}

Answer 2

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;

Answer 3

One viable solution is to use fa-star-half-o instead of fa-star-half.

<span class="fa-stack">
    <i class="fa fa-fw fa-lg fa-star-half-o fa-stack-1x"></i>
    <i class="fa fa-fw fa-lg fa-star fa-stack-1x"></i>
</span>

This way the width of the half-star is the same as the width of full stars, and your icons will stack up. No custom margins required.