Menu icon Foundation
FontAwesome 4.7 misaligned with Foundation 6.4.2

Hi,

I'm using FontAwesome 4.7 with Foundation 6.4.2, the newest versions of both. Whenever I put two or more FontAwesome icons next to each other horizontally, they are not vertically aligned. I've tried various vertical-align CSS styles and cannot get them aligned. please help!

and the code:

<div class="row callout">
  <div class="small-2 columns">
    <a href="" title="move up"><i class="fa fa-2x fa-sort-asc"></i></a>
    <a href="" title="move down"><i class="fa fa-2x fa-sort-desc"></i></a>
  </div>
</div>

fontawesomevertical align

Hi,

I'm using FontAwesome 4.7 with Foundation 6.4.2, the newest versions of both. Whenever I put two or more FontAwesome icons next to each other horizontally, they are not vertically aligned. I've tried various vertical-align CSS styles and cannot get them aligned. please help!

and the code:

<div class="row callout">
  <div class="small-2 columns">
    <a href="" title="move up"><i class="fa fa-2x fa-sort-asc"></i></a>
    <a href="" title="move down"><i class="fa fa-2x fa-sort-desc"></i></a>
  </div>
</div>
Rafi Benkual about 2 years ago

It doesn't appear to have to do with Foundation or CSS in general, rather that those icons have a height to them.

E. Smythe about 2 years ago

Thanks for the reply. In the screenshot you included, I don't see height.... just font-size and display: inline-block. Did you mean font-size? I wonder how other people are aligning these. Also, if they had a height, why would that affect the vertical alignment?