Ionic-标头图标与顶部对齐

Question

我使用Fontastic制作了一个自定义字体图标，以便在我的Ionic项目中使用。 当我将图标作为按钮应用到标题时，对齐方式似乎已关闭。 但是，每当我将图标从Ionicons更改为图标时，它都可以正常工作。 我究竟做错了什么？

我没有应用任何自定义样式。

这是它的样子。

右侧的图标是自定义图标。 它与顶部对齐，而Ionicons的图标则没有。

编辑：代码，

<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>

编辑2：

我尝试了line-height和vertical-align：middle。

行高不变。 默认情况下，垂直对齐设置为“顶部”。 给中点不能解决我的问题，它也会破坏离子图标。 注意我覆盖了ionic的CSS。 实际上，离子图标运行正常。 这是我的自定义字体坏了。

编辑3：

我想知道这是否与我为制作字体图标而创建的SVG有关？ 那可能吗？

Answer 1

使用line-hight.

您可以使用线高垂直对齐图标。

看到这个http://vanseodesign.com/css/vertical-centering/

NB：对不起，这应该是一个评论，但我对此没有足够的声誉。 :(

Answer 2

尝试使用vertical_align: middle; 。 看这里垂直对齐| W3学校

Answer 3

行高是您的选择。 使用萤火虫查看最适合您的软件。

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