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，它与轮廓一起使用时设计不吸引人。

我曾尝试使用“float”，但没有成功。如果我使用“margin-left”，间距是关闭的。见下图：

感谢任何帮助。谢谢！

杰西

Answer 1

一种可行的解决方案是使用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 2

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

Answer 3

使用下面的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;
}