在Bootstrap中是否可以像Font Awesome的图标一样“堆叠”默认的Glyphicons?Glyphicons能否做到这一点:http://fortawesome.github.io/Font-Awesome/examples/#stacked,还是我必须进行自定义编码?
谢谢!
在Bootstrap中是否可以像Font Awesome的图标一样“堆叠”默认的Glyphicons?Glyphicons能否做到这一点:http://fortawesome.github.io/Font-Awesome/examples/#stacked,还是我必须进行自定义编码?
谢谢!
这里是(Bass Jobsen解决方案的)一个更短、更干净的版本。
css
.icon-stack {
position: relative;
}
.icon-stack .glyphicon {
position: absolute;
}
HTML
<span class="icon-stack">
<i class="glyphicon glyphicon-unchecked"></i>
<i class="glyphicon glyphicon-ok"></i>
</span>
例子
Bootstrap的Glyphicons CSS没有堆叠的类。你可以应用你的示例代码中的类:http://bootply.com/88775
CSS
.icon-stack {
display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: -35%;
width: 2em;
}
.icon-stack .icon-stack-base {
font-size: 2em;
}
.icon-stack [class^="icon-"], .icon-stack [class*=" icon-"] {
display: block;
font-size: 1em;
height: 100%;
line-height: inherit;
position: absolute;
text-align: center;
width: 100%;
}
.icon-stack .glyphicon{
font-size: 2em;
}
.glyphicon-ban-circle
{
color:red;
}
html
<span class="icon-stack">
<i class="glyphicon glyphicon-phone icon-stack-base"></i>
<i class="glyphicon glyphicon-ban-circle"></i>
</span>
font-size: 2em
,它们会在角落对齐。有没有办法让它们在中心对齐?(例如将较大的glyphicon-ban-circle
放在较小的 glyphicon 上方) - bj0