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

Posted 2023-02-22

【中文标题】Stacking Font-Awesome Star Icons (fa-star & fa-star-half)

【英文标题】：

【发布时间】：2015-08-29 16:35:19

【问题描述】：

我想堆叠两个 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”，间距是关闭的。见下图：

感谢任何帮助。谢谢！

杰西

【问题讨论】：

工作正常jsfiddle.net/f63h157x

他不希望它看起来像图片

【参考方案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>

这样半星的宽度和全星的宽度一样，你的图标会堆叠起来。无需自定义边距。

【参考方案2】：

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

【参考方案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;

【讨论】：

感谢@TheOnlyError！我遇到的“margin-left”问题是相对于周围文本（或者，在我的情况下，其他星号）的间距是关闭的。我更新了我的问题描述以包含图像。您对如何解决问题有任何想法吗？再次感谢！

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