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

Question

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

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

但是，在许多应用程序中，通常需要对Glyphicons进行“自定义”，以便它们带有数字上标，如下所示：

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

Answer 1

你的意思是这样的吗？

这只是一些CSS基本样式，没有afaik没有“标准”样式，当然也没有支持它的特殊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>当您使用字形文字，字形字体等时，通常使用标签

<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-notificationCSS是相同的，除了它似乎不可能调整数容器的位置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;
}

不同的字体大小应该大致相同。

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