How to make a stacked Font Awesome icon have the same width as a fixed width non stacked one?

Question

http://jsfiddle.net/cirosantilli/aZ9g4/3/

The stacked "GitHub Issue" icon is twice as large as the other fixed width non stacked ones, and makes my nav look bad.

Is there a way within the library to make it be the same size without hacking low level CSS properties?

If only there was a fa-stack-half...

If not, what is the best workaround?

Answer 1

Looking at the examples for stacked icons, you can do this by modifying the font-size on the span:

Just add a rule like:

.fa-sm {
    font-size:0.63em;
}

With Markup:

<span class="fa-stack fa-sm">
  <i class="fa fa-exclamation fa-stack-1x"></i>
  <i class="fa fa-circle-o fa-stack-2x text-danger"></i>
</span>Github Issue 

Fiddle: http://jsfiddle.net/epxtY/

Answer 2

Try adding this CSS

.fa-stack{
    width: 1.28571em;    
}
.fa-circle-o.fa-stack-2x {
    font-size: 1.4em;
    top: 2px;
}
.fa-exclamation.fa-stack-1x{
    font-size: 10px;
    top: -3px;
}

http://jsfiddle.net/aZ9g4/12/