叠加Font Awesome星形图标 (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"，间距就会有问题。请参见下面的图像：

任何帮助都将不胜感激。谢谢！

杰西

- Jesse

---

对我来说运行良好 https://jsfiddle.net/f63h157x/ - lmgonzalves

他不想让它看起来像图片。 - TheOnlyError

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;
}

- TheOnlyError

---

感谢@TheOnlyError！我遇到的问题是，“margin-left”相对于周围文本（或者在我的情况下，其他星号）的间距不正确。我更新了我的问题描述，包括一张图片。你有什么想法来解决这个问题吗？再次感谢！ - Jesse

刚刚意识到间距错误是由于“.fa-stack”的格式而不是“margin-left”。谢谢你解决了这个问题 - 看起来我现在又有另一个问题要处理了！ - Jesse

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>

这样，半星的宽度与满星的宽度相同，您的图标将堆叠在一起。无需自定义边距。

- Leo Galleguillos

Answer 3

我认为您需要做的就是将<i />元素应用text-align: left;，这样就可以正确对齐，而不需要使用margin-left: 5px;。

- Phillip Quinlan