md-button 内的 Font Awesome 图标对齐

Question

我正在尝试对齐按钮内的超棒字体图标，以便它们相对于工具栏上的文本居中。我有以下标记；

<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 在第二个图标上使它看起来居中，尽管我怀疑它仍然与顶部对齐。我试过在 md-button 上粘贴 layout-alignment="center center" 没有效果。

如何控制 md-buttons 中超赞字体图标的对齐方式，特别是如何在工具栏中将它们垂直居中？是否有 Angular Material 的对齐方式，或者此处是否需要自定义 CSS？

CodePen

Answer 1

似乎是 md-icon 元素上的 24px 固定高度扰乱了图标的垂直对齐。 FontAwesome 图标设计有动态高度，因此在 md-icon 元素上强制固定高度是不兼容的；这个元素的中间不再是图标的中间。尝试用 height: auto; 覆盖它，它应该可以愉快地工作，例如：

md-icon {
  height: auto;
}

Answer 2

试试这个 css

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

Answer 3

为 md-icon 添加的高度导致了问题

md-icon {    
    height: 24px;    
}

您需要添加一些额外的class，如下所示

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

并且需要覆盖高度

.fa-md {
    height: auto;
}

Answer 4

我检查了 Angular Material (1.1.1) 的最新版本，这个问题已经解决了。享受吧！

md-button 内的 Font Awesome 图标对齐

Font Awesome icon alignment inside md-button

javascript

css

angularjs

font-awesome

angular-material