如何在Bootstrap 3的Glyphicons中传递数字

Question

有没有任何选项或解决方案可以在 Bootstrap 3 Glyphicons 中传递数字，例如：

谢谢。

- Mona Coder

---

可能是重复的问题：如何使用 CSS 将数字用圆圈包围？ - KyleMit

Answer 1

没有这样的选项或解决方案可以将数字传递到Bootstrap 3 Glyphicons。这里是所有可用的Glyphicons。Glyphicons可以作为图像文件或字体集出现。无论哪种方式，它们都不可扩展。它们是单独的图标。这就像说，我知道有一个a-z的字符集，但它也可以有一只小狗的图标吗？或者我知道这是一个苹果的图像，但像素可以改变，所以它变成了一个数字。

---

当然，您可以轻松使用CSS来完成此操作。这是一个微不足道的实现，所以不必担心“额外类的成本”。如果您正在开发网站，应该有足够的类可供使用。

尝试以下任何如何使用CSS将数字包围在圆圈中？建议：

使用边框半径

<div class="numberCircle">30</div>

.numberCircle {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    width: 36px;
    height: 36px;
    padding: 8px;
    background: #fff;
    border: 2px solid black;
    color: black;
    text-align: center;
    font: 32px Arial, sans-serif;
    display: inline-block;
}

使用Unicode字符

对于20及以下的版本，您可以直接使用enclosed_alphanumerics unicode字符：

①
②
③
④
⑤
⑥

① ② ③ ④ ⑤ ⑥

在jsFiddle中的演示

- KyleMit

---

嗨，KyleNit，感谢您的回复。我想知道在Bootstrap本身中是否可能实现这一点，因此无需额外的类。 - Mona Coder

简短回答是不行的。Bootstrap 是一个起点框架，但它并不能包含所有功能。如果你有特定要求，需要像这样添加一些东西。如果你只使用 Bootstrap 内置的内容，那你可能会非常幸运或者最终得到一个非常通用的网站。 - Rob Quincey