如何在Bootstrap 3中实现带有“数字下标”的Glyphicons？

Question

通常，在Bootstrap 3应用程序中插入Glyphicon很简单，只需：

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

在许多应用程序中，往往会对Glyphicons进行“定制”，使它们带有数字上标，像这样:

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

- DirtyMikeAndTheBoys

Answer 1

你是指像这样的吗？ 这只是一些CSS基本样式，据我所知没有“标准”，也没有特殊的HTML标签或“秘密”的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/

NB：虽然不完全相关，但我认为在使用glyphicons、fontawesome等时使用标签是常见做法。

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

至少它的渲染效果完全一致 -> http://jsfiddle.net/rqfthhkx/1/

---

Font Awesome字体图标

示例：

<i class="fa fa-envelope text-primary">
  <span class="number-notification">7</span>
</i>

.number-notification CSS 与原来相同，但似乎无法调整数字容器的位置到fa-xx大小和不同字体大小。解决方法是将<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/

- davidkonrad

---

这似乎无法使用Font Awesome图标。 有适用于它们的东西吗？ - cst1992

嘿@cst1992，我已经更新了答案。希望它能够正常工作。似乎不可能有一个通用的解决方案，可以与.fa-xx维度类一起使用，例如.fa-lg、.fa-7x等以及非常不同的字体大小。但是，如果您将.fa元素包装到标题类中，它似乎可以工作。 - davidkonrad

这很不错。原始解决方案（没有标题元素）是否具有与图标缩放的数字？这感觉有点不成比例 - 数字在fa和h5示例中看起来很大，而在h3及更大的情况下则很小。但总体而言，做得很好。 - cst1992