gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 15:04:55 26 4
gpt4 key购买 nike

我想堆叠两个 Font Awesome 图标 fa-starfa-star-half,但我遇到对齐问题。见下图:

Attempt to stack fa-star and fa-star-half fails due to alignment of icons

这是我的 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”,间距就会关闭。见下图:

enter image description here

感谢任何帮助。谢谢!

杰西

最佳答案

使用以下 margin-left 对齐图像。在这里查看:https://jsfiddle.net/f63h157x/1/

enter image description here

.fa-stack i.fa-star-half {
color:yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
margin-left: -5px;
}

关于html - Stacking Font-Awesome Star Icons(fa-star & fa-star-half),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30823865/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com