分类导航

HTML 发布时间：2022-04-14 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html – 如何在引导符号上添加一个环，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何在自举字形周围添加环,而不使用实心圆？我看到一个例子,你只是坐在圆形字形顶部的字形,但是你没有得到正确的背景颜色,如下所示.

解决方法

以下是一个示例,说明如何在具有模块化背景/颜色/边框选项的另一个(圆形)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>