html - Stacking Font-Awesome Star Icons (fa-star & fa-star-half) -
i want stack 2 font awesome icons fa-star , fa-star-half, having alignment issues. see image below:
here 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 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 not want use fa-star-half-o has unappealing design when used outline.
i have tried use "float," without success. if use "margin-left," spacing off. see image below:
any appreciated. thanks!
jesse
use following margin-left
line image. check 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; }
Comments
Post a Comment