Bootstrap 3: Can the Glyphicons be stacked like Font Awesome's icons?

Question

Is it possible to "stack" the default glyphicons using Bootstrap like you can with Font Awesome's icons? Can Glyphicons do this: http://fortawesome.github.io/Font-Awesome/examples/#stacked or do I have to do custom coding?

Thanks!

Answer 1

Here is a shorter, cleaner version (of Bass Jobsen' solution)

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>

example

http://jsfiddle.net/58aED/2/

Answer 2

Bootstrap's CSS for Glyphicons don't have classes to stack. You could apply the classes from your example code: 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>