堆栈bootstrap glyphicons

Question

我正在使用以下引导程序图标

class="glyphicon glyphicon-plus"

我想改变按钮的颜色,我使用以下但现在我想加号图标将在这样的圆圈中,我应该怎么做？

    i.glyphicon {
        color: white;
    }

Answer 1

另一个名为font-awesome的图标包具有更好的灵活性和将图标堆叠在一起的功能.包含Glyphicons的Bootstrap 3没有太多选项,所以我从font-awesome中取出了CSS并将其用于Glyphicon.

HTML看起来像:

<span class="glyphicon-stack">
<i class="glyphicon glyphicon-circle glyphicon-stack-2x"></i>
<i class="glyphicon glyphicon-plus glyphicon-stack glyphicon-stack-1x"></i>
</span>

主要的CSS:

.glyphicon-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}

.glyphicon-circle{
position: relative;
border-radius: 50%;
width: 100%;
height: auto;
padding-top: 100%;
background: black;
}

.glyphicon-stack-1x {
line-height: inherit;
}

.glyphicon-stack-1x, .glyphicon-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}

对于图标的样式(颜色,大小),您可以创建更多css类属性并添加到相应的图标.

看看这个例子.