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:

attempt stack fa-star , fa-star-half fails due alignment of icons

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:

enter image description here

any appreciated. thanks!

jesse

use following margin-left line image. check 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; } 

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -