如何在图标上显示数字？

Question

我使用Font-Awesome来显示图标。现在我想在旁边的图标上添加一个数字。我怎么能这样做？

<i class="fa fa-calendar-o text-info">10</i>

如果这样做，图标旁边会出现10。怎么能像悬停图标一样？

Answer 1

在图标上创建另一个div堆叠，其中z-index值高于图标

<div class="box">
 <span class="high-z-index">10</span>
 <i class="fa fa-calendar-o text-info"></i>
</div>

也许你可以这样做。

Answer 2

喜欢zimorok的回答，试试这个http://jsfiddle.net/Lm8vdg8u/2/

<div id="calendar">
  <span class="day">10</span>
  <i class="fa fa-calendar-o fa-3x text-info"></i>
</div>

CSS

#calendar .day{
position: absolute;
z-index: -9999;
top: 30px;
left: 21px;
}