通过为图标容器设置固定宽度和统一对齐方式，可彻底消除图标切换导致的文本位移问题，确保 ui 布局稳定、用户体验一致。
通过为图标容器设置固定宽度和统一对齐方式，可彻底消除图标切换导致的文本位移问题，确保 ui 布局稳定、用户体验一致。
在使用 FontAwesome 图标（如 fa-check-square 和 fa-square-o）实现可切换的复选状态时，开发者常遇到一个看似细微却影响体验的问题：当图标切换时，由于两个图标字形宽度不同（例如实心勾选框比空心方框略宽），其所在行内元素的自然流式布局会发生微小偏移，导致紧邻的文本（如 {{ label }}）左右“晃动”。
根本原因在于： 标签默认为 inline 元素，其占用的水平空间随字体渲染的实际字形宽度动态变化；而 fa-check-square 与 fa-square-o 在相同 font-size 下具有不同的 glyph width，造成父容器内联流重排。
✅ 正确解法是脱离文本流干扰——为每个图标包裹一层具有固定尺寸与明确定位语义的容器，并统一控制其尺寸与对齐：
<div class="d-flex align-items-center"> <div style="width: 1.5rem; text-align: center;"> <i *ngIf="selected" (click)="selected = false;" class="fa fa-check-square purple-1 check"></i> </div> <div style="width: 1.5rem; text-align: center;"> <i *ngIf="!selected" (click)="selected = true;" class="fa fa-square-o purple-1 check check-unselected"></i> </div> {{ label }} </div>? 关键要点说明：
- 固定容器宽度（如 width: 1.5rem）：确保无论哪个图标显示，其占位空间完全一致，避免父级 d-flex 中子项宽度波动；
- text-align: center：使图标在其容器中水平居中，视觉上更整齐，且不依赖图标自身 baseline 对齐差异；
- 保留语义化交互：事件仍绑定在 上（无需迁移至外层 div），逻辑清晰、可维护性强；
- 响应式友好：推荐用 rem 或 em 而非 px 设定宽度，便于整体缩放适配；
- ✅ 进阶优化：可进一步提取为 CSS 类，例如：
.icon-placeholder { width: 1.5rem; text-align: center; }并在模板中复用：
…⚠️ 注意事项：
- 避免仅靠 visibility: hidden 或 opacity: 0 隐藏未激活图标——它们仍占据原始空间，但可能因字体渲染差异引发轻微 layout shift；
- 不建议使用 position: absolute 脱离文档流，会增加对齐与响应式调试复杂度；
- 若项目已引入 Font Awesome 6+，注意 fa-square-o 已被弃用，应改用 fa-square + fa-regular 或 fa-solid 配合条件类控制。
最终效果：图标切换全程无布局位移，文本始终锚定在同一视觉位置，符合 WCAG 的稳定性（Stability）原则，也显著提升表单控件的专业感与可用性。