如何在glyphicon内部设计风格？

Question

对于可点击的跨度，我希望glyphicon的内部为白色，而不是显示其背后的元素。我该怎么做？

<ul class="summary">
    <li></li>
    <li class="summary-pendingitem">
        <input id="input-newrating-text" class="summary-pendingitem-text" 
               placeholder="rating's text"/>
        <input id="input-newrating-color" class="summary-pendingitem-color" 
               placeholder="rating's color"/>
        <span id="btn-addrating" class="glyphicon glyphicon-plus-sign"></span>
    </li>
</ul>

.summary{
    position: relative;
    list-style-type: none;
    max-width: 18em;
    margin-top: 1em;

 }
 .summary li{
    border: 1px solid gray;
 }
 .summary li input{
    margin: .3125em;
    width: 96%;
}
#btn-addrating{
    position: absolute;
    top: -0.313em;
    right: -0.313em;
    font-size: 2em;
    color: #77dd77; 
}

Answer 1

一般来说，你can't really modify any icon or glyph itself不仅可以稍微改变角色'R'的呈现方式。图标只是给定字体的字形或字符。

但是，所有元素都可以同时具有color和background-color属性。因此，在这种情况下，您只需向glyphicon元素添加背景颜色，这将应用白色矩形背景。在这个特定的例子中，如果您希望背景“拥抱”更接近恰好是圆形的图标，您可以应用border-radius 50%将元素转换为圆形。所以你可以这样做：

.my-plus {
    color: #006800;;
    background: white;
    border-radius: 50%;
}

或者，您可以通过将两个或多个图标堆叠在一起来组合图标 您可以stack icons natively in Font-Awesome或adding a little CSS to Bootstrap's Glyphicons：

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-plus fa-stack-1x fa-inverse"></i>
</span>

Demo in jsFiddle