html - Font-Awesome Star アイコンのスタック (fa-star & fa-star-half)

Question

2 つの Font Awesome アイコンfa-starとfa-star-halfをスタックしたいのですが、位置合わせの問題があります。下の画像を参照してください。

ここに私の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>

...そして私の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;
}

fa-star-half-oは、アウトラインで使用すると魅力のないデザインになるため、使用したくないことに注意してください。

「フロート」を使用しようとしましたが、成功しませんでした。「margin-left」を使用すると、間隔がオフになります。下の画像を参照してください。

どんな助けでも大歓迎です。ありがとう！

ジェシー

Answer 1

以下margin-leftを使用して画像を並べます。ここで確認してください: 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

あなたがする必要があるtext-align: left;のは、両方の<i />要素に a を適用することだけであり、使用する必要なく適切に整列する必要があると思いますmargin-left: 5px;