Bootstrap 3 - Align font-awesome icon inside button vertically - html

Question

I am trying to align some font-awesome arrow vertically inside two Bootstrap buttons.
Actually both the text and the icons should be vertically aligned in the middle of the button.
If the text inside falls into a single line or wraps in multiple ones the arrow icon should always adjust to the middle of the total height of the button, if that makes sense.
I've been trying to sort this one out for hours now but for the life of me I can't figure this out.
Here's the markup:
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<button type="button" class="btn btn-block btn-foo1"><span> this is <br>button<br>one</span><i class="icon-angle-right"></i></button>
<button type="button" class="btn btn-block btn-foo2"><span>this is button two</span><i class="icon-angle-right"></i></button>
</div>
</div>
and here's a jsFiddle (updated) with what I currently have. Please note that the red background of the icons should touch the edges of the button (top/bottom/right) as opposed to what it is now.

Answer 1

Set both elements to display inline-block and then set the span to take up a percentage of the space. In this case 90% / 10% seems to work good.
span {
vertical-align:middle;
display:inline-block;
width:90%;
}
To remove the padding you can do this: (probably want to add a some left padding)
.btn-foo1,
.btn-foo2 {
padding:0;
border:0;
}
Change display to inline block, and remove right float:
.btn-foo1 [class^="icon-"],
.btn-foo2 [class^="icon-"],
.btn-foo1 [class*=" icon-"],
.btn-foo2 [class*=" icon-"] {
background-color: red;
display:inline-block;
vertical-align:middle;
padding:24px;
width:10%;
}
Demo:
http://jsfiddle.net/9brbD/19/
Also I would add a class to the span, instead of using span {} use myClass {}.