Question

我需要为我的排名应用使用图标。

我想从使用icon-star-empty的5个空星图标开始。

然后将它们与icon-star重叠以根据排名填充它们。

font-awesome只有半空星，失去了一半的星。

有谁知道我是否可以重叠图标来实现我的目标？

编辑：这是5个完整空星图标的代码：

<i class="icon-star-empty icon-large"><i class="icon-star-empty icon-large"><i class="icon-star-empty icon-large"><i class="icon-star-empty icon-large"><i class="icon-star-empty icon-large"></i></i></i></i></i>

我希望与此重叠：<i class="icon-star-half icon-large"></i> 10X

Answer 1

如果我说得对，这就是你要做的事情：

<div id="empty">
<img class="stars empty" src="http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_17.gif">
</div>

<div id="half">
<img class="stars empty" src="http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_17.gif">
<img class="stars half" src="http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_16.gif">
</div>

<div id="full">
<img class="stars empty" src="http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_17.gif">
<img class="stars half" src="http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_16.gif">
<img class="stars starfull" src="http://cdn1.iconfinder.com/data/icons/icojoy/shadow/standart/png/24x24/001_15.png">
</div>

我将每个案例都包含在一个div中。要以您尝试的方式叠加图像，您需要指定绝对位置。这是一个快速的CSS，说明它如何适合你：

div {
    position:relative;
    height:2em;
}
.stars {
    position:absolute;
    top:0;
    left:0;
}

希望这是你想要做的。您可以将此应用于任何类型的html标记元素以及您想要的次数，10次，100次=）

修改我再次阅读你的问题和所有评论......我认为你可以通过改变背景和/或使用重叠背景而不是重叠html元素来更容易地做到这一点。我使用了上面的代码并说明了我在小提琴上的意思：http://jsfiddle.net/38vHj/

无论如何，在javascript（或php或者你想要处理信息的地方）交换类要容易得多......然后使用特定的css类选择器。

最终解决方案： 所以是的...你可以重叠任何html标签元素！经过大量的反复思考后，我给你写了你想要的东西并把它贴在小提琴上：jsfiddle.net/ddXDp/2

因此最终结果是半星元素下的另一个空星元素。现在你只需按照你想要的方式排列和设计元素=）

字体 - 令人敬畏的重叠图标

1 个答案: