css - 如何在 Bootstrap 3 Glyphicons 中传递数字

Question

是否有任何选项或解决方案来传递 Numbers is Bootstrap 3 Glyphicons like

谢谢

Answer 1

Is there any option or solution to pass Numbers is Bootstrap 3 Glyphicons?

简而言之，没有。这里是all the available glyphicons .

Glyphicons 以图像文件或字体集的形式出现。无论哪种方式，它们都是不可扩展的。它们是单独的图标。这就好比说，我知道有 a-z 的字符集，但它能不能也有小狗的图标。或者我知道这是一个苹果的图像，但像素可以改变所以它是一个数字。

---

当然，您可以使用 CSS 轻松做到这一点。这是一个微不足道的实现，所以我不会担心“额外类(class)的成本”。如果您正在开发一个网站，您应该有很多类。

尝试 how to use CSS to surround a number with a circle? 中的任何建议:

使用边框半径

<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 characters :

①
②
③
④
⑤
⑥

① ② ③ ④ ⑤ ⑥

Demo in jsFiddle