Make a row of Font Awesome Icons height identical

font-awesomeheighticons

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?

Best Answer

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.

Viewport-Percentage (or Viewport-Relative) Lengths

What are Viewport-Percentage Lengths?

From the linked W3 Candidate Recommendation above:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).

How can this be used to make a divider fill the height of the browser?

For this question, we can make use of vh: 1vh is equal to 1% of the viewport's height. That is to say, 100vh is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

This is literally all that's needed. Here is a JSFiddle example of this in use.

What browsers support these new units?

This is currently supported on all up-to-date major browsers apart from Opera Mini. Check out Can I use... for further support.

How can this be used with multiple columns?

In the case of the question at hand, featuring a left and a right divider, here is a JSFiddle example showing a two-column layout involving both vh and vw.

How is `100vh` different from `100%`?

Take this layout for example:

<body style="height: 100%">
    <div style="height: 200px">
        <p style="height: 100%; display: block;">Hello, world!</p>
    </div>
</body>

The p tag here is set to 100% height, but because its containing div has 200 pixels height, 100% of 200 pixels becomes 200 pixels, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height. Take a look at this accompanying JSFiddle to easily see the difference!

Html – Make body have 100% of the browser height

Try setting the height of the html element to 100% as well.

html, 
body {
    height: 100%;
}

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.

However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.

html {
  height: 100%;
}
body {
  min-height: 100%;
}

Best Answer

Related Solutions

Html – How to make a div 100% height of the browser window