如何在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/