Font awesom icons alignment

Question

I try to place three fa icons in line so that they have equal height. The thing is that they do not look aligned even if I set their sizes manually (via font-size property) (I need them to be around 11px though) . I've been trying to change their positions as well for quite a lot of time. And what is the result:

.trash {
  position: relative;
  font-size: 11px;
}
.upload {
  position: relative;
  font-size: 11px;
}
.download {
  position: relative;
  top: 1px;
  font-size: 11px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
 <i class="fa fa-download download"></i>
<i class="fa fa-upload upload"></i>
<i class="fa fa-trash trash"></i>

Obviously, they are not aligned. Is it possible to make them more "even"? I know that similar questions have already been asked, but they did't really help me.

Answer 1

As all caracters don't have the same baseline, you have to play with each individually. The red borders in my example show it. This is the best I can do, I set the font-size to 30px in order to check alignement.

.icons {
    font-size: 30px;
  }

.fa {
  border-top: 1px red solid;
  border-bottom: 1px red solid;
}

.download {
  position: relative;
  top: 0.07em;
}
.download:before {
   font-size: 1.06em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="icons">
  <i class="fa fa-download fa-4x download"></i>
  <i class="fa fa-upload fa-4x upload"></i>
  <i class="fa fa-trash fa-4x trash"></i>
</div>

Use relative font sizes (em unit) for adjustments, and it will be the same whatever the font-size is.