How to align bootstrap icon with text in button?

Question

How to align bootstrap icon and image to bottom? ( I am using font-awsome for icons ).

JSBIN: http://jsbin.com/uwupuz/2/edit

<div class="btn-group"> 
    <a class="btn" href="#">
      <i class="icon-plus"></i>
      <span>Add</span>
    </a>
    <a class="btn" href="#">
        <i class="icon-trash"></i>
        <span>Remove</span>
    </a>
    <a class="btn" href="#">
      <i class="icon-edit"></i>
      <span>Edit</span>
    </a>
  </div>

Answer 1

Try this: http://jsfiddle.net/jonschlinkert/CBss2/1/ this is what it looks like after applying line-height: 1;

I wouldn't mess with the position property as suggested by @hajpoj, there are cleaner ways to fix the problem that won't have cascading effects later. The other problem with using position: relative is that each icon is actually a little bit different in size. You want to try to keep maintenance down by accounting for that. It's best to make it appear as if it's bottom-aligned for most normal sized icons, and when a larger-than-average icon is used it is centered properly with the text. Using position: relative a larger icon will push above the others and look off-center.