Bootstrap页面替换FontAwesome为Material Icons的垂直对齐问题

• 字体基线设计差异：Material Icons和FontAwesome、系统文本的字体基线不匹配。Material Icons的图标默认居中在字体的x-height（小写字母高度）区域，而FontAwesome是对齐到文本基线，Bootstrap按钮的文本也基于基线布局，导致Material Icons视觉上偏移。
• Bootstrap按钮的默认布局限制：Bootstrap的<button>和.btn类默认是inline-block布局，依赖vertical-align: middle实现内部元素对齐，但这个属性的效果完全依赖元素的字体度量（基线、行高、上下留白），Material Icons的字体内置行高、上下留白和FontAwesome/文本不一致，导致vertical-align: middle无法统一对齐。
• Material Icons默认样式冲突：.material-icons类默认自带font-size: 24px，且字体本身的ascender（字母上伸高度）/descender（字母下伸高度）和其他字体不匹配，在同一行内会打破原有对齐节奏。

以下是两种全局修复思路，可根据需求选择：

方案1：调整Material Icons样式匹配现有布局 #

通过统一垂直对齐、字体大小和行高，让Material Icons适配Bootstrap和FontAwesome的对齐规则：

// 全局修正Material Icons的对齐属性
.material-icons,
.material-icons-outlined {
  // 匹配FontAwesome的垂直偏移值，对齐文本基线
  vertical-align: -0.125em;
  // 继承父元素字体大小，避免默认24px破坏按钮布局
  font-size: inherit;
  // 统一行高，和父元素保持一致
  line-height: inherit;
  // 可选：如果Material Icons视觉大小和FontAwesome不匹配，添加缩放调整
  // transform: scale(0.875);
  // transform-origin: center;
}

方案2：改用Flex布局彻底解决对齐问题 #

直接修改Bootstrap按钮的布局方式，用Flex替代默认的inline-block，从根源消除基线对齐的问题：

// 给所有Bootstrap按钮设置Flex布局，内部元素自动垂直居中
.btn {
  display: inline-flex;
  align-items: center;
  // 可选：添加图标与文本的间距，符合Bootstrap间距规范
  gap: $btn-padding-x / 2;
}

// 保持Material Icons的字体大小适配
.material-icons,
.material-icons-outlined {
  font-size: inherit;
}

方案说明 #

• 方案1适合不想改动Bootstrap按钮布局逻辑的场景，仅调整Material Icons的样式来适配现有规则。
• 方案2更彻底，Flex布局的align-items: center会让内部所有元素（图标、文本）完美垂直居中，同时保留Bootstrap按钮的其他样式特性（如圆角、颜色、响应式）。

内容的提问来源于stack exchange，提问作者Michael