如何解决FontAwesome图标切换时右侧文本偏移的问题？

问题场景 #

使用FontAwesome实现自定义勾选框功能时，切换选中（fa-check-square）和未选中（fa-square-o）状态时，右侧的文本会出现轻微偏移，需要让文本始终保持静止。

原代码如下：

CSS #

.check {
    font-size: 1.25rem;
    cursor: pointer;
}

.check-unselected {
    color: #4E444B
}

HTML #

<div class="d-flex">
  <i *ngIf="selected" (click)="selected = false;" class="fa fa-check-square purple-1 check"></i>
  <i *ngIf="!selected" (click)="selected = true;" class="fa fa-square-o purple-1 check check-unselected"></i> &nbsp;{{ label }}
</div>

问题原因 #

两个FontAwesome图标（fa-check-square和fa-square-o）的实际渲染宽度存在细微差异，再加上用*ngIf直接切换DOM元素，导致容器宽度随图标变化，进而带动右侧文本偏移。

解决方案 #

方法一：固定图标容器宽度 #

给图标外层添加一个固定宽度的容器，强制占据相同的空间，无论切换哪个图标，容器宽度都不变，文本位置就会稳定。

修改后代码：

CSS（新增容器样式）

.check {
    font-size: 1.25rem;
    cursor: pointer;
}

.check-unselected {
    color: #4E444B
}

.check-container {
    width: 1.25rem; /* 与图标font-size保持一致 */
    display: inline-block;
}

HTML（调整结构）

<div class="d-flex">
  <div class="check-container">
    <i *ngIf="selected" (click)="selected = false;" class="fa fa-check-square purple-1 check"></i>
    <i *ngIf="!selected" (click)="selected = true;" class="fa fa-square-o purple-1 check check-unselected"></i>
  </div> {{ label }}
</div>

方法二：复用单个元素切换类名 #

不再用*ngIf切换两个独立的<i>元素，而是使用同一个元素，通过动态切换类名来改变图标样式。这样DOM元素始终存在，宽度不会发生变化，文本自然不会偏移。

修改后代码：

CSS（保持原有样式不变）

.check {
    font-size: 1.25rem;
    cursor: pointer;
}

.check-unselected {
    color: #4E444B
}

HTML（简化结构）

<div class="d-flex">
  <i (click)="selected = !selected;" 
     [class.fa-check-square]="selected" 
     [class.fa-square-o]="!selected"
     [class.check-unselected]="!selected"
     class="purple-1 check"></i> {{ label }}
</div>

效果说明 #

两种方法都能解决文本偏移问题：

• 方法一通过固定容器宽度，确保图标区域的空间一致；
• 方法二通过复用DOM元素，避免元素替换带来的布局重排。

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