FontAwesome | How to make icons line up with each other vertically? - css

Question

I'm using font awesome to create icons on my site.
The issue is that, some icons are taller than the actual icon content of the icon, so they don't line up on the baseline because of that extra height.
I want the icons to all be bottom aligned, on the baseline. Just like how letters are bottom aligned. For this to work, the icons must be only as tall as the content.
It is the actual :before inside of the .fa div that is taller than it should be. Here is an imagine which demonstrates 3 different .fa icons. One of them is taller than it should be.
I highlighted it's content box with blue before clipping it from Chrome.
You will notice how the bottom of the icon has extra space from some reason. That is the actual :before highlighted.
IMAGE EXAMPLE
How can I get rid of this space, so that the icons sit nicely baselined?

Answer 1

Please see this codepen example: https://codepen.io/vtsells/pen/oeJKNz
Essentially what I have done is wrapped the problem icon in a parent container so that I can then control what the height is supposed to be. Since I can control the height of the icon this way, I can control where the bounding-boxes are in terms of alignment. The alignment is done via flex-box in this example. display:flex; align-items:flex-end //flex-start to align to the top, center to align to the vertical center
Html:
<div id="container">
<i class="fa fa-trash-o fa-2x"></i>
<i class="fa fa-clock-o fa-2x"></i>
<div id="wrapper">
<i class="fa fa-check-square-o fa-2x"></i>
</div>
</div>
CSS:
#container{
background:#888;
display:flex;
align-items:flex-end;
padding:10px;
}
#wrapper{
background:#ccc;
overflow:hidden;
height:29px;
width:30px;
}
i{
background:#ccc;
}