How do you add a ring around bootstrap glyphs, without using a solid circle? I have seen an example where you just sit a glyph over the top of the circle glyph, but then you don't get the correct background colour, as shown below.
2 Answers
Here's an example of how to display and position an icon inside another (circle) div with modular background/color/border options.
See working Snippet.
/**CSS FOR THE RING**/
.glyphicon-ring {
width: 60px;
height: 60px;
border-radius: 50%;
border: 4px solid white;
color: white;
display: inline-table;
text-align: center;
}
/**CSS FOR ICON WITH NO BACKGROUND COLOR**/
.glyphicon-ring .glyphicon-bordered {
font-size: 20px;
vertical-align: middle;
display: table-cell;
}
/**WITH AN ADDED BACKGROUND COLOR**/
.glyphicon-white {
background: white;
color: black;
border: 4px solid black;
}
.glyphicon-teal {
background: teal;
color: orange;
}
.glyphicon-red {
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container-fluid text-center">
<div class="row">
<div class="col-sm-3">
<div class="alert alert-success">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-pencil glyphicon-bordered"></span>
</div>
</div>
<h4>Transparent Defaults</h4>
</div>
<div class="col-sm-3">
<div class="alert alert-warning">
<div class="glyphicon-ring glyphicon-white"> <span class="glyphicon glyphicon-pencil glyphicon-bordered"></span>
</div>
</div>
<h4>Background Color + Icon Color + Border Color</h4>
</div>
<div class="col-sm-3">
<div class="alert alert-danger">
<div class="glyphicon-ring glyphicon-red"> <span class="glyphicon glyphicon-pencil glyphicon-bordered"></span>
</div>
</div>
<h4>Background Color + Default Icon Color</h4>
</div>
<div class="col-sm-3">
<div class="alert alert-info">
<div class="glyphicon-ring glyphicon-teal"> <span class="glyphicon glyphicon-pencil glyphicon-bordered"></span>
</div>
</div>
<h4>Background Color + Icon Color</h4>
</div>
</div>
</div>
<hr>
-
1if using this snippet inside a table, add
border-collapse: initial;
to.glyphicon-ring
. Apr 26, 2017 at 11:15
I'd use border-radius
, you'll probably need to tweak the height
and width
values.
.glyph{
height:2em;
width:2em;
border-radius:50%;
border:3px solid #fff;
}
-
just gave a try to it - kagda.ru/i/d9011230d9298_26-02-2017-22:50:53_d901.png .Any ideas how to make it in center?– TebeFeb 26, 2017 at 19:51
-
-
maybe adding a bit of padding will help with vertical and horizontal centering Jun 11, 2018 at 19:19
border
andborder-radius
?