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.
In lines 15 and 17 the <span> and <a> element has the bootstrap glyphicon glyphicon-pencil classes, so to use any glyphicon in bootstrap: Use the <span> or <a> element. Set the class attribute of the <span> or <a> element as glyphicon then a space and then glyphicon-iconname.
Free Alternatives to Glyphicons You can use both Font Awesome and Github Octicons as a free alternative for Glyphicons.
Glyph Icons are nothing but the graphical symbols that are expressed in the form of fonts in web pages.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With