堆叠字体 - 令人敬畏的星形图标(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-星半邻带大纲使用时有吸引力的设计.

我试图使用"浮动",但没有成功.如果我使用"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;
}