如何在Bootstrap字体图标周围添加环绕线

Question

如何在Bootstrap字形周围添加环，而不使用实心圆？我看过一个示例，在该示例中，您只需将字形放在圆形字形的顶部，但是您将无法获得正确的背景颜色，如下所示。

- George Edwards

---

使用 border 和 border-radius 怎么样？ - Nenad Vracar

Answer 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>

- vanburen

---

如果在表格中使用此代码片段，请将 border-collapse: initial; 添加到 .glyphicon-ring。 - João Costa

Answer 2

我会使用border-radius属性，你可能需要调整height和width的值。

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

- Donnie D'Amato

---

刚刚尝试了一下 - http://kagda.ru/i/d9011230d9298_26-02-2017-22:50:53_d901.png 。有什么想法可以让它居中吗？ - Tebe

text-align:center; - Donnie D'Amato

也许添加一些填充可以帮助实现垂直和水平居中。 - Don Viegues