底部圖標疊加

以下是我試圖放置圖標疊加的小提琴，就像下圖所示：請讓我知道我該怎麼做？底部圖標疊加

enter image description here

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

來源

2013-10-12 user2304394

請澄清一下，目前尚不清楚你想要做什麼。 – Rich

是否這樣？ http://jsfiddle.net/czvRa/2/ –

@Rich哎呀對不起沒有提到'覆蓋的圖標' – user2304394

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; 
}

來源

2013-10-12 06:59:06

入住這

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

可以增加或減少使用圖標大，圖標-2X，圖標-3X圖標的大小，圖標-4x類

需要小小的CSS工作

來源

2013-10-12 07:03:36

底部圖標疊加

回答

相關問題