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

Question

通常，要在Bootstrap 3应用程序中插入Glyphicon，它就像这样简单：

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

等。然而，在许多应用程序中，Glyphicons通常会“自定义”，因此它们会显示数字上标，如下所示：

在上面，此红色/白色“ 5 ”气泡可能表示用户有5个通知。 我想知道如何在Bootstrap 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>

演示了一些例子 - ＆gt;的 http://jsfiddle.net/rqfthhkx/

注意：并不完全相关，但我做相信，当您使用glyphicons时，通常会使用<i>标记，fontawesome等

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

至少它呈现完全相同 - ＆gt;的 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>元素中，并以relative单位指定rem位置：

.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;
}

对于不同的字体大小，这看起来应该或多或少相同。

新小提琴 - ＆gt;的 http://jsfiddle.net/b86oj9gd/