Stack bootstrap glyphicons

Question

I'm using the following bootstrap icon

class="glyphicon glyphicon-plus"

and I want to change the color of the button and I use the following But now I want that the plus icon will be in circle like this ,how should I do that?

    i.glyphicon {
        color: white;
    }

Answer 1

Another icon package called font-awesome has better flexibility and feature of stacking icons together. Bootstrap 3 containing Glyphicons don't have much options so I took out the CSS from font-awesome and adopted it for Glyphicon.

The HTML looks like:

<span class="glyphicon-stack">
<i class="glyphicon glyphicon-circle glyphicon-stack-2x"></i>
<i class="glyphicon glyphicon-plus glyphicon-stack glyphicon-stack-1x"></i>
</span>

The main CSS:

.glyphicon-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}

.glyphicon-circle{
position: relative;
border-radius: 50%;
width: 100%;
height: auto;
padding-top: 100%;
background: black;
}

.glyphicon-stack-1x {
line-height: inherit;
}

.glyphicon-stack-1x, .glyphicon-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}

For the styling of the icons (color, size), you can create more css class properties and add to the respective icons.

Have a look at this example.