How to Pass Numbers in Bootstrap 3 Glyphicons

Question

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

Thanks

Answer 1

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

In short, no. Here are all the available glyphicons.

Glyphicons either come as an image file or font set. Either way, they are not extensible. They are individual icons. It's like saying, I know there's a character set of a-z, but can it also have a icon of a puppy. Or I know this is an image of an apple, but can the pixels change so it's a number.

---

You can, of course, easily do this with CSS. It's a trivial implementation, so I wouldn't worry about the 'cost of extra classes'. If you're developing a website, you should have plenty of classes.

Try any of the suggestions from how to use CSS to surround a number with a circle?:

Use Border Radius

<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;
}

Use Unicode Characters

For 20 and lower, you can just use the enclosed_alphanumerics unicode characters:

①
②
③
④
⑤
⑥

① ② ③ ④ ⑤ ⑥

Demo in jsFiddle