在按鍵圖標彈出離子顯示問題

Question

下面的代碼：

var importPopup = $ionicPopup.show({ 
     title: 'Select import source', 
     subTitle: '(GPX, KML or WMS layer)', 
     scope: $scope, 
     cssClass: "popup-import", 
     buttons: [ 
     { 
      text: '<b>From Drive</b>', 
      type: 'button icon-left icon-google-drive button-positive' 
     }, 
     { 
      text: '<b>From URL</b>', 
      type: 'button icon-left ion-link button-positive', 
      onTap: function(e) { 
       $scope.url(); 
      } 
     }, 
     { 
      text: '<b>Cancel</b>', 
      type: 'button icon-left ion-close-round button-assertive' 
     } 
     ] 
    }); 

和輸出它產生：https://imgur.com/y790RKC

當顯示只有兩個按鈕，文本和圖標正確對齊。當只有圖標顯示三個按鈕時，它們也會正確對齊。在CSS中，按鈕被格式化爲行。如果沒有這種格式的按鈕看起來是這樣的：https://imgur.com/zrxqwhl

這裏是CSS的相關章節：

.popup-import .popup-buttons 
{ 
    display: block; 
} 

任何建議表示讚賞。

Answer 1

添加到您的CSS：

.popup-buttons .button.icon-left:not(.button-small), 
.popup-buttons .button.icon-right:not(.button-small) { 
    // fix for intel-popup with icons 
    line-height: 40px !important; 
}