字体真棒重叠图标

Question

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

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

然后将它们与图标 - 星级重叠以基于等级填充它们。

字体真棒只有一半的空星与缺少一半的明星。

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

编辑： 这是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

如果我understan正确的，这是你是什么试图做到：

<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

所以，最终的结果是半星元素下的额外空星元素。 现在你只需要按照你想要的方式安排和设计元素=）