将普通图标与堆叠图标对齐并且大小相同

Question

我有两个图标，我想将它们对齐为相同的大小。预期结果：

目前的发展：

如果我尝试将堆栈图标设置小，它看起来像这样：

所以，我想让它们对齐。这是我现在所拥有的一个片段：

.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;
}

<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/[email protected]/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>

你知道如何正确对齐它们吗？

Answer 1

您可以使用 d-flex 来解决这个问题。使用 font-size 标签设置图标大小，然后使用 d-flex 正确对齐项目

<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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-1 d-flex justify-content-start">
  <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>