Bootstrap 3: Can glyphs be styled as awesome fonts?

Question

Is it possible to "drain" default glyphics using Bootstrap, as you can, using the awesome font icons? Can the Glyphicons do this: http://fortawesome.imtqy.com/Font-Awesome/examples/#stacked or do I need to make my own encoding?

Thanks!

Answer 1

Bootstrap CSS for Glyphicons does not have classes for the stack. You can apply the classes from your sample 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> 

Answer 2

Here is a shorter, cleaner version (Bass Jobsen solutions)

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/