We are using Bootstrap v4.6.2 and FontAwesome 5.15.4. We have the following HTML code snippet which renders an unordered list with differently-sized FontAwesome icons (0.8em vs 0.44em).
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<ul class="fa-ul">
<li>
<i class="fa-li fa fa-star fa-sm" style="font-size: 0.8em;"></i>
<a href="#">Link 1</a>
</li>
<li>
<i class="fa-li fas fa-circle fa-sm" style="font-size: 0.44em;"></i>
<a href="#">Link 2</a>
</li>
</ul>Icons in front of the links are not aligned vertically. Circle icon is much more to the right than the star icon. Icons should also be horizontally aligned with text (currently, circle icon is much higher than it should be). How can we achieve the required alignments?
Rather than alter the font-size, I suggest you use a transform (in this case scale ) as this will not affect layout.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<ul class="fa-ul">
<li>
<i class="fa-li fa fa-star fa-sm" style="scale: 0.8"></i>
<a href="#">Link 1</a>
</li>
<li>
<i class="fa-li fas fa-circle fa-sm" style="scale: 0.44;"></i>
<a href="#">Link 2</a>
</li>
</ul>