Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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!

Problem courtesy of: redshift

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





Solution courtesy of: Bass Jobsen

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×