如何在 Bootstrap 3 中实现带有 "numeric subscripts" 的 Glyphicons？

Question

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

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

等然而，在许多应用程序中，Glyphicons 通常是 "customized"，这样它们就带有数字上标，如下所示：

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

Answer 1

你的意思是这样的？

这只是一些 CSS 基本样式，afaik 没有 "standard"，当然也没有特殊的 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/

注意：不完全相关，但我相信，在使用 glyphicons、fontawesome 等时使用 <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-notification CSS 是一样的，除了似乎无法将数字容器的位置调整为 fa-xx 大小和不同 font-sizes。解决方法是将<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;
}

不同的字体大小看起来应该差不多。

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

如何在 Bootstrap 3 中实现带有 "numeric subscripts" 的 Glyphicons？

How to achieve Glyphicons with "numeric subscripts" inside Bootstrap 3?

glyphicons

twitter-bootstrap-3