html - Stacking Font-Awesome Star Icons (fa-star & fa-star-half)

Question

我想堆叠两个 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

一种可行的解决方案是使用fa-star-half-o而不是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>

这样半星的宽度与全星的宽度相同，并且您的图标将堆叠起来。无需自定义边距。

Answer 3

我认为您需要做的就是将 atext-align: left;应用于两个<i />元素，并且它应该正确对齐而无需使用margin-left: 5px;