'Stack bootstrap glyphicons

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? enter image description here

    i.glyphicon {
        color: white;
    }
csstwitter-bootstrap


Solution 1:[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.

Solution 2:[2]

You can add some simple css rules to that element, like:

i {
    background: green;
    padding: 3px;
    border-radius: 100%;
    color: white;
}

You could abstract it, creating two classes, like i.circle.green, and split those rules between them, so you don't override default bootstrap classes.

Solution 3:[3]

Try wrapping the icon using .circle class.

Solution 4:[4]

as already mentioned, you can do something like this:

HTML

<div class='test'><span class="glyphicon glyphicon-plus"></span></div>
<span class="glyphicon-class">.glyphicon .glyphicon-plus</span>

CSS

.test{
    width:25px;
    height:25px;
    background: green;
    padding: 3px;
    border-radius: 100%;
    color: white;
    text-align:center
}

http://jsfiddle.net/InferOn/AtmNr/5/

Solution 5:[5]

This can be done natively in Bootstrap by:

<i class="d-flex justify-content-center align-items-center position-relative bi bi-circle lh-1" style="font-size: 15rem; color: cornflowerblue;">
   <i style="font-size: 8rem;" class="position-absolute bi bi-card-checklist"></i>
</i>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Gregorio Setti
Solution 3 Gokhan Dilek
Solution 4 alessandro
Solution 5 Dave

Related Questions