How to Pass Numbers in Bootstrap 3 Glyphicons

Profile picture for Mona Coder
Mona Coder

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

enter image description here

Thanks

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

<!-- language: lang-html --> 
<div class="numberCircle">30</div>
<!-- language: lang-css --> 
.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;
}

screenshot

Use Unicode Characters

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

<!-- language: lang-html --> 
&#9312;
&#9313;
&#9314;
&#9315;
&#9316;
&#9317;

① ② ③ ④ ⑤ ⑥

Demo in jsFiddle