17

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.

Example

1
  • How about using border and border-radius ? Nov 21, 2015 at 17:14

2 Answers 2

18

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>

1
  • 1
    if using this snippet inside a table, add border-collapse: initial; to .glyphicon-ring. Apr 26, 2017 at 11:15
2

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;
}
3

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.