字体真棒重叠图标[关闭]

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> 10 倍

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 次 =)

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

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

最终解决方案： 所以是的......你可以重叠任何 html 标签元素！ 现在经过多次来回，我写了你想要的东西并将它发布在小提琴上：jsfiddle.net/ddXDp/2

所以最终结果是在半星元素下多了一个空星元素。 现在你只需要按照你想要的方式排列和设置元素的样式 =)