在字形图标上添加文本

Question

我希望文本以一个字形图标为中心。我尝试了几个 css 标签，但在 vain.Following 中是我的 html

<table>
    <tr>
        <td rowspan="4"> 
            <span class="glyphicon glyphicon-bookmark"></span>
            <span>2</span>
        </td>
        <td>John Oliver</td>
    </tr>
</table>

Answer 1

你可以这样试试：Demo

.glyphicon {
    position: relative;      
}

.glyphicon + span {
    position: absolute;
    left: 5px; 
    top:5px; /* adjust the top & left values according to your need */      
}

希望这就是你想要的！！

Answer 2

抱歉最后一个答案。我想这就是你想要的。看看演示。

演示 http://jsfiddle.net/yhq3npxs/

HTML

  <div class="container">
  <i class="glyphicon glyphicon-heart icon-size"></i>
   <span class="badge shoppingBadge shoppingBadge-custom">5</span>
 </div>

CSS

.icon-size {
font-size:60px;
 }

 .shoppingBadge-custom{
background: red;
position:absolute;
left:47px;
top:18px;
font-size:14px;
z-index: 3;
 }

在字形图标上添加文本

Adding text on glyphicon

html

css

styling

glyphicons