css - 如何在字形图标内设置样式？

Question

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

<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 属性。因此，在这种情况下，您可以只向字形元素添加背景色，这将应用白色矩形 背景。在这种特殊情况下，如果您希望背景“拥抱”得更靠近恰好是一个圆圈的图标，您可以应用 50% 的 border-radius > 将元素变成一个圆圈。所以你可以这样完成:

.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