html - 底部图标叠加

Question

以下是我试图在其上放置图标叠加层的小提琴，就像下图一样，请让我知道我该怎么做？

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

在此处查看演示

这里我使用的是 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 工作