字体真棒重叠图标
我需要为我的排名应用程序使用图标。字体真棒重叠图标
我想从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
如果我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
所以,最终的结果是半星元素下的额外空星元素。 现在你只需要按照你想要的方式安排和设计元素=)
10倍,你可以将你的解决方案应用到字体真棒? – user1973995 2013-02-27 14:41:14
那么它会是这样的:http://jsfiddle.net/ddXDp/1/如果你需要它像你在示例代码中那样嵌套...但你可能有一个原因,你为什么这样做那=) – 2013-02-27 15:03:22
我终于得到你想要的:http://jsfiddle.net/ddXDp/2/,我也将它添加到答案了= D耶! – 2013-02-27 15:15:23
一张图片(和一个代码块)描绘了一千个单词。 – George 2013-02-27 13:11:25
这是一个普遍的问题。 是否可以重叠字体真棒图标? – user1973995 2013-02-27 13:14:05
我不明白你的目标。 – 2013-02-27 13:14:05