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:

Attempt to stack fa-star and fa-star-half fails due to alignment of icons

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:

enter image description here

Any help is appreciated. Thanks!

Jesse

Working fine for me https://jsfiddle.net/f63h157x/ – lmgonzalves Jun 13 '15 at 22:25 — lmgonzalves, Jun 13 '15 at 22:25
He doesn't want it to look like the image – TheOnlyError Jun 13 '15 at 22:40 — TheOnlyError, Jun 13 '15 at 22:40

score 4 · Accepted Answer · answered Jun 13 '15 at 22:42

4

Use the following margin-left to line up the image. Check it out here: https://jsfiddle.net/f63h157x/1/

enter image description here

.fa-stack i.fa-star-half {
    color:yellow;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: orange;
    margin-left: -5px;
}

answered Jun 13 '15 at 22:42

TheOnlyError

1,441
12
19

Thanks @TheOnlyError! The problem I run into with "margin-left" is that the spacing relative to surrounding text (or, in my case, other stars) is off. I updated my problem description to include an image. Do you have any thoughts on how to fix the problem? Thanks again! – Jesse Jun 15 '15 at 21:14
Just realized that the spacing error is due to the formatting of ".fa-stack" rather than "margin-left". Thank you for solving this problem - looks like I have another one to deal with now! – Jesse Jun 15 '15 at 21:37

score 1 · Answer 2 · answered Aug 11 '15 at 04:07

1

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;

answered Aug 11 '15 at 04:07

Phillip Quinlan

189
7

score 1 · Answer 3 · answered Jun 24 '17 at 05:10

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.

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

3 Answers3