Как добавить кольцо вокруг бутстрапов глификонов

Как вы добавляете кольцо вокруг бутстраповных глифов, не используя сплошной круг? Я видел пример, когда вы просто сидите глиф поверх глифа круга, но тогда вы не получите правильный цвет фона, как показано ниже.

Ответы

Ответ 1

Вот пример того, как отображать и размещать значок внутри другого (круг) div с модульными настройками фона/цвета/границы.

См. рабочий фрагмент.

/**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>

Ответ 2

Я бы использовал border-radius, вам, вероятно, потребуется настроить значения height и width.

.glyph{
   height:2em;
   width:2em;
   border-radius:50%;
   border:3px solid #fff;
}