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

Question

I want to stack two Font Awesome fa-star and fa-star-half icons, but I have alignment problems. 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; } 

Please note that I do not want to use fa-star-half-o , which has an unattractive design when used with an outline.

I tried to use "float", but to no avail. If I use "margin-left", the interval is disabled. See image below:

Any help is appreciated. Thanks!

Jessie

Answer 1

To align the image, use the following margin-left . Take a look 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 have to do is apply text-align: left; to both <i /> elements, and it should align correctly without using 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> 

Thus, the width of the half-star will be the same as the width of the full stars, and your badges will fold. No custom fields are required.