堆叠字体 - 真棒星图标（fa-star＆amp; 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 ，当与大纲一起使用时，它具有不吸引人的设计。

我曾试图使用“浮动”，但没有成功。如果我使用“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

一个可行的解决方案是使用add_filter('woocommerce_single_product_image_thumbnail_html', 'remove_featured_image', 10, 2); function remove_featured_image($html, $attachment_id ) { global $post, $product; $featured_image = get_post_thumbnail_id( $post->ID ); if ( $attachment_id == $featured_image ) $html = ''; return $html; } 代替fa-star-half-o。

fa-star-half

这样半角的宽度与全星的宽度相同，你的图标就会叠加起来。无需自定义边距。

Answer 3

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