Stacking Font-impressionanti Star Icons (FA stelle e fa-star-metà)

Question

Voglio impilare i due caratteri impressionanti icone fa-stella e fa-stelle-metà, ma sto avendo problemi di allineamento. Vedi immagine qui sotto:

Ecco il mio 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> 

... e il mio 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; 
} 

Nota che faccio non desidera utilizzare fa-star-half-o che ha un design sgradevole quando viene utilizzato con un contorno.

Ho provato a utilizzare "float", ma senza successo. Se utilizzo "margin-left", la spaziatura è disattivata. Vedi immagine qui sotto:

Ogni aiuto è apprezzato. Grazie!

Jesse

Answer 1

Utilizza il seguente margin-left per allineare l'immagine. Check it out qui: 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

Penso che tutto quello che dovete fare è applicare un text-align: left; ad entrambe le <i /> elementi e dovrebbe allineare correttamente senza bisogno di usare margin-left: 5px;

Answer 3

One soluzione valida è quella di utilizzare fa-star-half-o anziché 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> 

In questo modo la larghezza della mezza stella è la stessa come la larghezza di stelle pieno, e le icone si stack up. Non sono richiesti margini personalizzati.