如何让Font Awesome普通图标与堆叠图标对齐并保持同尺寸？

效果对比 #

预期效果 #

当前效果 #

缩小堆叠图标后的效果 #

当前代码片段 #

CSS #

.icon {
  color: #a3a1a1;
}

.icon__plus-program {
  font-size: x-large;
}

.icon__trash {
  font-size: x-large;
}


.btn-unstyled {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
}

HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-1">
  <button class="btn-unstyled" (click)="addAccordionItem()">
                    <span class="icon">
                      <i class="fa-solid fa fa-trash-alt icon__trash"></i>
                    </span>
                  </button>
  <button id="addAccordionItem" class="btn-unstyled" (click)="addAccordionItem()">
                  <span class="fa-stack icon icon__plus-program custom-icon">
  <i class="fa-regular fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-plus fa-stack-1x"></i>
</span>
                  </button>
</div>

解决方案 #

问题核心是Font Awesome堆叠图标（fa-stack）的默认布局与单个图标不一致，导致对齐和尺寸偏差，可通过以下调整解决：

修改后的CSS #

.icon {
  color: #a3a1a1;
  /* 确保图标垂直居中对齐 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon__trash {
  font-size: 1.5rem; /* 用具体数值替代x-large，尺寸更可控 */
}

.icon__plus-program {
  /* 调整堆叠图标基础尺寸，匹配单个图标视觉大小 */
  font-size: 1.2rem;
}

/* 微调堆叠内部图标比例，保证整体视觉协调 */
.icon__plus-program .fa-stack-2x {
  font-size: 1.25em;
}
.icon__plus-program .fa-stack-1x {
  font-size: 0.75em;
}

.btn-unstyled {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  /* 按钮内元素垂直居中 */
  display: flex;
  align-items: center;
}

修改后的HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-1 d-flex gap-2"> <!-- Bootstrap flex类实现按钮横向排列+间距 -->
  <button class="btn-unstyled" (click)="addAccordionItem()">
    <span class="icon icon__trash">
      <i class="fa-solid fa-trash-alt"></i> <!-- 移除重复的fa类，避免样式冲突 -->
    </span>
  </button>
  <button id="addAccordionItem" class="btn-unstyled" (click)="addAccordionItem()">
    <span class="fa-stack icon icon__plus-program">
      <i class="fa-regular fa-circle fa-stack-2x"></i>
      <i class="fa-solid fa-plus fa-stack-1x"></i>
    </span>
  </button>
</div>

关键调整说明 #

• 给按钮和图标容器添加flex布局+align-items: center，解决图标基线对齐不一致的问题。
• 用rem具体数值替代x-large，精准控制单个图标与堆叠图标的视觉尺寸匹配。
• 调整堆叠图标内部fa-stack-2x和fa-stack-1x的字体比例，让圆形+加号的组合视觉大小和垃圾桶图标一致。
• 外层col-1添加Bootstrap的d-flex gap-2类，让两个按钮横向排列且保持合理间距。
• 移除垃圾桶图标中重复的fa类，避免样式冲突。

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