Does bootstrap have a basic circle glyphicon

Daniel Aldridge picture Daniel Aldridge · Aug 29, 2014 · Viewed 31.1k times · Source

Is there just a basic circle for the glyphicons in Bootstrap??? There are plenty of circles with images in them.. but I would just like to use a basic cirlce. Thanks!

Answer

isherwood picture isherwood · Aug 30, 2014

Like others have said, the Bootstrap team have opted to not fill an icon spot with a standard character. It's pretty easy to build your own, though:

.glyphicon.glyphicon-one-fine-dot:before {
    content: "\25cf";
    font-size: 1.5em;
}

Demo 1

If you need it very large you may need to fiddle with position a bit. You can't reduce line-height on a pseudo-element, so you have to pull it down with margins:

.glyphicon.glyphicon-one-fine-dot {
    margin-bottom: -.8em;
    overflow: hidden;
}
.glyphicon.glyphicon-one-fine-dot:before {
    content:"\25cf";
    font-size: 3em;
}

Demo 2

There's an empty dot, too: Demo 3

And, of course, you can color them: Demo 4

What about fitting it all in a button, you ask? No worries. Just use a negative top margin, too.