Search code examples
csstwitter-bootstrap-3glyphicons

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


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!


Solution

  • 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>