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

使用下面的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 /> 元素，它应该正确对齐而无需使用 margin-left: 5px;

Answer 3

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

这样半星的宽度和满星的宽度一样，你的图标就会叠起来了。不需要自定义边距。

Stacking Font-Awesome Star Icons（fa-star & fa-star-half）

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

html

css

css-float

font-awesome

font-awesome-4