Make a row of Font Awesome Icons height identical

Question

I'm building a website and I want to visually have a row of font awesome icons appear to have the same height. This also means I want them to all sit on the same baseline.

Due to the nature of the icons being different shapes with varying aspect ratios, when you place font awesome icons with the same font-size or fa-2x (etc) on the same line, their heights and baselines do not line up horizontally. In fact, I've noticed there doesn't seem to be much of a default for how the icons sit vertically in a row beside each other. Some sit above the baseline at random heights. Also at the same fa-size or font-size, the icons can visually appear to be dramatically different in size. For example the mobile-phone icon vs microphone.

The odd thing about the mobile-phone icon is how it floats above the baseline because it seems to have a built in padding that I can't seem to find a way to override. Using vertical-align:baseline etc does not help.

Here's the HTML:

          <div class="some-class">
            <i class="fa fa-microphone"></i><i class="fa fa-mobile-phone"></i>
            <h3>TEXT</h3>
          </div>
          <div class="some-class">
            <i class="fa fa-automobile"></i><i class="fa fa-cubes"></i>
            <h3>DIFFERENT TEXT</h3>
          </div>

The CSS:

.some-class {
    float: left;
    height: 160px;
    padding: 15px;
    text-align: center;
}

Anyone know of a proper way to align my font awesome icons with CSS so they appear visually to be exactly the same height when placed side by side?

Answer 1

Some of the glyphs size and centers are different by design from the majority (https://github.com/FortAwesome/Font-Awesome/issues/928) as you have found yourself. it might be worth to request reconsideration to the FA team.

I could align the icons in your layout though by using some css adjustments to compensate specifically for the "fa-mobile-phone". I added "fa-2x" to all icons and additionally the following css the the "fa-mobile-phone":

font-size: 42px;
top: 4px;
position: relative;

After that all the icons seem aligned vertically and all seem to have the same height. You might want to do similar adjustments in your layout.