Ionic - Header icon is aligned to the top

Question

I made a custom font icon using Fontastic to use in my Ionic project. When I applied the icon to the header as a button, the alignment seems to be off. But whenever I changed the icon to an icon from Ionicons it works just fine. What am I doing wrong?

I didn't apply any custom styles.

Here's what it looks like.

The icon on the right is the custom icon. And it's being aligned to the top whereas an icon from Ionicons doesn't.

EDIT: The code,

<ion-nav-title>Title</ion-nav-title>

<ion-nav-buttons side="right">
  <button class="button button-icon button-clear my-custom-icon-class" 
      ng-click="x.a">
  </button>
</ion-nav-buttons>

EDIT 2:

I tried both line-height and vertical-align:middle.

Line-height does not change anything. And vertical-align by default is set to "top". Giving middle does not solve my problem and it breaks the ionic icons as well. Note I'm overriding ionic's CSS. As it is, Ionic icons are working just fine. It's my custom font that's breaking.

EDIT 3:

I'm wondering perhaps it has something to do with the SVG I created for making the font icon? Is that possible?

Answer 1

Use line-hight.

you can use line height to vertically align your icon.

see this http://vanseodesign.com/css/vertical-centering/

NB: Sorry this is suppose to be a comment but I dont have enough reputation for that. :(

Answer 2

Try with vertical_align: middle; . Look here vertical-align | W3Schools

Answer 3

line-height is your option. Use firebug to see what suits you best.

http://www.w3schools.com/cssref/pr_dim_line-height.asp