底部的图标叠加

Question

以下是我的小提琴，我试图像下面的图片一样叠加Icon，请让我知道我该怎么做？

http://jsfiddle.net/czvRa/

<div align="center" style="margin-top: 5px; background-color: rgb(62, 160, 85); color: white; display: inline-block; padding: 8px;">
Inbox<br>
<span style="line-height: 25px;">0</span>

</div>

Answer 1

<强> See the Demo Here

这里我使用的是glyphicon，但你可以使用你想要的任何图标。

HTML

<div align="center" style="margin-top: 5px; background-color: rgb(62, 160, 85); color: white; display: inline-block; padding: 8px;">
Inbox<br>
<span style="line-height: 25px;">0</span>
<span class="someclass glyphicon glyphicon-user"></span>
</div>

CSS

div {
    position: relative;
}
.someclass {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 12px;
}

Answer 2

检查

<div align="center" style="margin-top: 5px; background-color: rgb(62, 160, 85); color: white; display: inline-block; padding: 8px;">
Inbox<br>
<span style="line-height: 25px;">0</span>
<i class="icon-sun"></i>
</div>

您可以使用icon-large，icon-2x，icon-3x，icon-4x类来增加或减少图标的大小

需要小CSS工作