Seeking guidance on aligning two icons to be the same size. Here is what I'm aiming for:
https://i.sstatic.net/SHuH9.png
However, in current development, they appear like this:
https://i.sstatic.net/crfdl.png
When attempting to resize the stack icon small, it appears as follows:
https://i.sstatic.net/3aNyu.png
My goal is to have them perfectly aligned. Below is a snippet of my existing code:
.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98c978b">[email protected]</a>/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>Any suggestions on how to achieve perfect alignment?