Twitter bootstrap 3 如何使用“图标”实现图形图标；数字下标；内部引导3？

通常，要在Bootstrap 3应用程序中插入Glyphicon，操作非常简单：

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

然而，在许多应用程序中，字形图标通常是“定制”的，这样它们就会出现数字上标，如下所示：

---

在上面，这个红/白“5”气泡可能表示用户有5个通知我想知道如何在Bootstrap 3中实现这种“数字上标”效果。

你的意思是这样的

这只是一些CSS基本样式，没有“标准”，当然也没有特殊的HTML标记，也没有支持它的“秘密”引导功能。以下是我的建议-进行修改，使其符合您的期望：

.rw号码通知{
位置：绝对位置；
顶部：-7px；
右图：-6px；
填充：3px 3px 2px 3px；
背景色：红色；
颜色：白色；
字体系列：arial；
字体大小：粗体；
字体大小：10px；
边界半径：4px；
盒影：1px 1px 1px银色；
}

标记：

7.

使用一些示例演示->

注：不完全相关，但我确实相信，在使用glyphicons等时使用

标记是一种常见的做法

至少它呈现的是完全相同的->

---

字体真棒

例如：

7.

.number通知

CSS是相同的，只是似乎无法将数字容器的位置调整为

fa xx

大小和不同的字体大小。解决方案是将

元素包装成

元素，并在

rem

单位中指定

相对位置：

.number通知{
位置：相对位置；
填充：3px 3px 2px 3px；
背景色：红色；
颜色：白色；
字体系列：arial；
字体大小：粗体；
字体大小：10px；
边界半径：4px；
盒影：1px 1px 1px银色；
}
.fa.编号通知{
顶部：-1rem；
右：1rem；
}
h3.fa.编号通知{
顶部：-1.2rem；
右：1.2rem；
}
h2.fa.编号通知{
顶部：-1.5雷姆；
右：1.5雷姆；
}
h1.fa.编号通知{
顶部：-2.2rem；
右：1.8rem；
}

对于不同的字体大小，这看起来应该大致相同


新提琴->
这似乎不适用于字体很棒的图标。有什么要说的吗？嘿@cst1992，我更新了答案。希望它能起作用。似乎不可能有一个通用的解决方案来处理
.fa xx
维度类，如
.fa lg
、
.fa-7x
等，以及各种不同的字体大小。但是如果您将
.fa
元素包装到头类中，它似乎可以工作。这很好。原始解决方案（没有标题元素）是否具有图标的数字缩放功能？这种感觉有点不成比例-数字看起来很大，或者是
fa
和
h5
示例，而
h3
和更大的则显得很小。但总的来说，干得不错。