如何在Bootstrap 3中使用“数字下标”实现字形？

Question

通常情况下，插入引导3应用程序内部的Glyphicon，它是那样简单：

<span class="glyphicon glyphicon-envelope"></span> 

等。在许多应用程序，但是，它是典型的Glyphicons是“定制”，使他们看起来与数字标像这样：

以上，这红/白 “” 泡沫可能表明用户有5个通知。 我想知道这是如何“数字标”效果可在引导3

Answer 1

实现你的意思是这样的吗？

这只是一些CSS基本样式，没有标准的“标准”，当然也没有特殊的HTML标签或支持它的“秘密”引导程序功能。下面我的建议 - 修改使之适合您的期望：

.rw-number-notification { 
    position: absolute; 
    top: -7px; 
    right: -6px; 
    padding: 3px 3px 2px 3px; 
    background-color: red; 
    color: white; 
    font-family: arial; 
    font-weight: bold; 
    font-size: 10px; 
    border-radius: 4px; 
    box-shadow: 1px 1px 1px silver; 
} 

标记：

<span class="glyphicon glyphicon-envelope"> 
    <span class="rw-number-notification">7</span> 
</span> 

演示一些例子 - >http://jsfiddle.net/rqfthhkx/

注：不完全相关，但我做认为，虽然，第在通常的做法是使用<i>标签，当您使用glyphicons，fontawesome等

<i class="glyphicon glyphicon-envelope"></i> 

至少它呈现为完全一样的 - >http://jsfiddle.net/rqfthhkx/1/

---

字体真棒

例如：

<i class="fa fa-envelope text-primary"> 
    <span class="number-notification">7</span> 
</i> 

.number-notification CSS是相同的，除了似乎不可能将数字容器的位置调整为fa-xx尺寸和不同的字体大小。的解决方案是将<i>元件包装到<h>元件和指定rem单位relative位置：

.number-notification { 
    position: relative; 
    padding: 3px 3px 2px 3px; 
    background-color:red; 
    color:white; 
    font-family: arial; 
    font-weight:bold; 
    font-size: 10px; 
    border-radius: 4px; 
    box-shadow:1px 1px 1px silver; 
} 
.fa .number-notification { 
    top: -1rem; 
    right: 1rem; 
} 
h3 .fa .number-notification { 
    top: -1.2rem; 
    right: 1.2rem; 
} 
h2 .fa .number-notification { 
    top: -1.5rem; 
    right: 1.5rem; 
} 
h1 .fa .number-notification { 
    top: -2.2rem; 
    right: 1.8rem; 
} 

这看起来或多或少相同与不同的字体大小。

新小提琴 - >http://jsfiddle.net/b86oj9gd/