html - 带有白色圆圈背景的 Bootstrap 3 符号字形图标

Question

问题

有什么方法可以使 Bootstrap 3.2 符号字形具有白色背景？它显示在彩色背景上。我有一个 example on bootply但它有一个令人讨厌的白色装饰。

CSS

.glyph-white-background {
  background-color:#FFFFFF;
  border-radius: 50%;
}

Answer 1

我玩过 bootply，可能有更好的方法来做到这一点，但现在我通过在 glyphicon 元素内放置一个内部跨度并定位它来对其进行排序，使其边框不与父元素重叠。

<div class="header">
  <span class="glyphicon glyphicon-exclamation-sign glyph-background">
    <span class="inner"></span>
  </span>
</div>

CSS 将内部定位为仅为图标提供红色背景。

.header {
    background-color:#3AA3CB;
    font-size: x-large;
}

.glyph-background {
    position:relative;
    border-radius:50%;
    color:#fff;
    z-index:2;
}

.inner {
    position:absolute;
    top:2px;
    left:2px;
    right:2px;
    bottom:2px;
    border-radius:50%;
    background-color:red;
    z-index:-1;
}

Bootply