Menu icon Foundation
Vertical align Icon Fonts inside buttons

Hello,

Im trying to find an easy way to vertically align Foundations Icon Fonts inside their buttons but cant seem to find any CSS trick thats not a ton of code. The icons tend to blow out the padding on the buttons pretty bad or the text wont be in the right locations.

icon fontsvertical alignbuttonscss trick

Hello,

Im trying to find an easy way to vertically align Foundations Icon Fonts inside their buttons but cant seem to find any CSS trick thats not a ton of code. The icons tend to blow out the padding on the buttons pretty bad or the text wont be in the right locations.

Nathan Cooper almost 6 years ago

If you know the button height, you can set its line-height equal to its height, that should vertically center the icons. That is a general solution, not Foundation specific, but hopefully it will work for you.

Caleb Winters almost 6 years ago

There is no reliable way to vertically center elements in CSS, unfortunately. Flexbox looks promising, but it is not very widely supported yet.

Nathan's line-height trick is your best bet. You can also tweak the position manually using position: relative and adjusting the directional properties.

Asif almost 6 years ago

you could use this jquery plugin as well :

https://github.com/PaulSpr/jQuery-Flex-Vertical-Center

Kyle Rader over 5 years ago

A very easy option is to use The Grid - centered columns.

<div class="row">
  <div class="large-4 columns large-centered">
    <a href="your link for a button"><i class="fi-some-icon"></i></a>
  </div>
</div>

Example here => http://sw.cs.wwu.edu/~raderk/