字體真棒圖標對齊內部md按鈕

我想對齊字體令人敬畏的圖標裏面的一個按鈕，以便他們相對於文本工具欄上的中心。我有以下標記;字體真棒圖標對齊內部md按鈕

<div ng-app="app"> 
    <md-toolbar> 
     <div class="md-toolbar-tools" md-tall""> 
     <h2> 
      <span>Icons</span> 
     </h2> 
     <md-button class="md-icon-button"> 
      <md-icon md-font-icon="fa-circle" class="fa"></md-icon> 
     </md-button> 
     <md-button class="md-icon-button"> 
      <md-icon md-font-icon="fa-circle" class="fa fa-lg"></md-icon> 
     </md-button> 
    </div> 
    </md-toolbar> 
</div>

它產生以下佈局;

fa-lg第二個圖標，使它看起來雖然中心我懷疑它仍然是頂部對齊。我試圖堅持layout-alignment="center center"對md-button沒有任何效果。

我該如何控制md按鈕內字體棒圖標的對齊方式，特別是如何在工具欄中垂直居中放置這些圖標？有沒有一種角度材質的方式來做這種對齊，或者是這裏需要的自定義CSS？

CodePen

來源

2015-11-27 Stafford Williams

這似乎是在.md-icon類，其與垂直取向搞亂的24px的固定高度。 FontAwesome圖標是動態高度，因此元素上的固定高度表示元素的中間不再是圖標的中間。試着用height: auto;覆蓋這個，它應該很愉快地工作。

來源

2015-11-27 05:20:02

[Fixed CodePen]（http://codepen.io/staff0rd/pen/bVPKXN） –

試試這個CSS

.md-icon-button .fa-circle { 
    font-size: 23px; 
    width: auto; 
}

來源

2015-11-27 05:23:21

高度增加了MD-圖標導致問題

md-icon {  
    height: 24px;  
}

您需要添加一些額外的類喜歡如下

<md-icon md-font-icon="fa-circle" class="fa **fa-md**"></md-icon>

並需要覆蓋高度

.fa-md { 
    height: auto; 
}

來源

2015-11-27 05:30:41

我檢查了角度材料（1.1.1）的最新版本，並且此問題已消失。請享用！

來源

2016-09-30 05:58:29 Envil

字體真棒圖標對齊內部md按鈕

回答

相關問題