Układanie Font-Wypasione Gwiezdne ikony (fa-Star & fa-star-połowa)

Question

Chcę układać dwa czcionki Firma Awesome ikony fa-gwiazdkowe i fa-star-pół, ale mam problemy z wyrównania. Patrz zdjęcie poniżej:

Tu jest mój 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> 

... i mój 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; 
} 

Zauważ, że robię nie chcesz użyć fa-star-half-o, który ma nieprzyjemny wygląd w połączeniu z obrysem.

Próbowałem użyć "float", ale bez powodzenia. Jeśli użyję "marginesu lewego", odstępy są wyłączone. Patrz zdjęcie poniżej:

Każda pomoc jest mile widziana. Dzięki!

Jesse

Answer 1

Użyj następującego margin-left wyrównać obraz. Sprawdź tutaj: 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

myślę, wszystko co musisz zrobić, to zastosować text-align: left; do obu <i /> elementów i należy go wyrównać prawidłowo bez konieczności używania margin-left: 5px;

Answer 3

One wykonalnym rozwiązaniem jest użycie fa-star-half-o zamiast 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> 

ten sposób szerokość pół-star jest taka sama jak szerokość pełne gwiazd, a twoje ikony stos. Nie są wymagane niestandardowe marginesy.