如何在字形图标内部设置样式？
如何在字形图标内部设置样式？
提问于 2014-07-22 04:57:22
对于可点击的跨度，我希望字形图标的内部是白色的，而不是显示它后面的元素。我该怎么做？
<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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2014-07-22 05:06:00
一般而言，您不能稍微改变字符'R'的表示形式，也不能对其进行can't really modify any icon or glyph itself。图标只是给定字体的字形或字符。
但是，所有元素都可以同时具有color和background-color属性。因此，在本例中，您可以向glyphicon元素添加背景色，这将应用白色矩形背景。在这个特殊的例子中，如果你想让背景“拥抱”到恰好是一个圆的图标，你可以应用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24874615
复制相关文章
相似问题
腾讯云开发者
