makar makar - 2 months ago 25
CSS Question

Font awesom icons alignment

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

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.