如何在Angular FontAwesome中正确堆叠fa图标并解决居中问题

修复方案 #

你出现偏移的核心原因是手动给堆叠内的图标添加了font-size、margin-left属性，破坏了Angular Fontawesome内置的堆叠对齐逻辑，按照以下步骤修改即可：

1. 移除两个fa-icon上你自己加的所有内联样式，堆叠的尺寸、对齐统一用官方提供的API控制
2. 基础修正代码如下：

<fa-stack>
  <fa-icon [icon]="['far', 'circle']" stackItemSize="2x"></fa-icon>
  <fa-icon icon="file-alt" stackItemSize="1x"></fa-icon>
</fa-stack>

如果需要调整整个堆叠的整体大小，直接给fa-stack元素设置font-size即可，所有子图标会等比缩放，不会破坏对齐逻辑：

<!-- 整个堆叠放大到2倍字号，对齐保持正常 -->
<fa-stack style="font-size: 2rem">
  <fa-icon [icon]="['far', 'circle']" stackItemSize="2x"></fa-icon>
  <fa-icon icon="file-alt" stackItemSize="1x"></fa-icon>
</fa-stack>

如果有细微的视觉偏移需要微调，不要用margin，用官方提供的transform属性做偏移，单位为em，适配性更强：

<fa-stack>
  <fa-icon [icon]="['far', 'circle']" stackItemSize="2x"></fa-icon>
  <!-- 示例：x轴向右偏移0.1em，y轴向上偏移0.1em，根据实际效果调整数值即可 -->
  <fa-icon icon="file-alt" stackItemSize="1x" [transform]="{ x: 0.1, y: -0.1 }"></fa-icon>
</fa-stack>

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