在字形图标上添加文本答案

【问题标题】：Adding text on glyphicon在字形图标上添加文本
【发布时间】：2015-09-08 16:43:12
【问题描述】：

我希望文本以字形图标为中心。我尝试了几个 css 标签，但徒劳无功。以下是我的 html

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

【问题讨论】：

你能分享你的css吗
on glyphicon 是什么意思？ 2?
预期的输出是什么......你能用图像表示吗？
添加了预期输出的图片

标签： css html styling glyphicons

【解决方案1】：

对不起最后一个答案。我想这就是你想要的。看看演示。

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

【讨论】：

这不是我想要的拉詹。我附上了一张图片
不需要将组件包裹在容器中，否则调整屏幕大小时徽章会改变其位置，这里有一个改进：jsfiddle.net/4m61sd3g

【解决方案2】：

你可以这样尝试：Demo

.glyphicon {
    position: relative;      
}

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

希望这是你想要的！！

【讨论】：

恐怕这不是我想要的。我附上了一张我想要的图片