在glyphicon上添加文本

时间:2015-09-07 09:02:09

标签: css html5 styling glyphicons

我希望文本以glyphicon为中心。我尝试了几个css标签但是徒劳无功。以下是我的HTML

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

enter image description here

2 个答案:

答案 0 :(得分:6)

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

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

答案 1 :(得分:3)

您可以尝试这样做: Demo

.glyphicon {
    position: relative;      
}

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

希望这就是你想要的!!