如何在自举字形周围添加环,而不使用实心圆？我看到一个例子,你只是坐在圆形字形顶部的字形,但是你没有得到正确的背景颜色,如下所示.
解决方法
以下是一个示例,说明如何在具有模块化背景/颜色/边框选项的另一个(圆形)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>
