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