md 按钮内的字体真棒图标对齐

Posted 2023-03-06

【中文标题】md 按钮内的字体真棒图标对齐

【英文标题】：Font Awesome icon alignment inside md-button

【发布时间】：2016-03-01 06:13:45

【问题描述】：

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

<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 按钮内的字体真棒图标的对齐方式，特别是如何在工具栏中垂直居中这些图标？是否有 Angular Material 方式来进行这种对齐，或者这里需要自定义 CSS？

CodePen

【参考方案1】：

md-icon 元素上的 24px 固定高度似乎与图标的垂直对齐方式发生了冲突。 FontAwesome 图标采用动态高度设计，因此在md-icon 元素上强制固定高度是不兼容的；这个元素的中间不再是图标的中间。尝试用height: auto; 覆盖它，它应该可以正常工作，例如：

md-icon 
  height: auto;

【讨论】：

对于 Angular Material 7.0.4（最新于 2018 年 11 月），这是为我做的：button .mat-icon height: auto;

【参考方案2】：

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

md-icon     
    height: 24px;    

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

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

并且需要覆盖高度

.fa-md 
    height: auto;

【参考方案3】：

试试这个css

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

【参考方案4】：

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

【讨论】：

我现在再次检查（2018 年 11 月），Angular Material 7.0.4，它又在那里...... :(