twitter-bootstrap-3 - 如何在 Bootstrap 3 中使用 "numeric subscripts"实现 Glyphicons？

Question

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

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

等然而，在许多应用程序中，通常 Glyphicons 会被“自定义”，以便它们以数字上标出现，如下所示:

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

Answer 1

你的意思是这样的？

这只是一些 CSS 基本样式，据我所知，没有“标准”，当然也没有特殊的 HTML 标签，也没有支持它的“ secret ” Bootstrap 功能。根据我的建议 - 修改以符合您的期望:

.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>元素并指定 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;
}

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

新 fiddle -> http://jsfiddle.net/b86oj9gd/