Align li containing svg, with other li containing font-awesome icons [duplicate] - html

Question

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
FontAwesome is missing one Icon and as such I have to fall back to using an svg.
<ul class="icons other">
<li><a>
<svg width="50" height="50">...</svg>
</a></li>
<li><a class="fab fa-soundcloud"></a></li>
<li><a class="fab fa-spotify"></a></li>
</ul>
with the following styling (scss),
.icons {
>li {
display: inline-block;
padding: 0;
>a, svg {
height: 50px;
width: 50px;
line-height: 50px;
font-size: 1.8em;
text-align: center;
border-radius: 50%;
color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0px 2px rgba(255, 255, 255, 0.56);
}
.fab {
background-color: black;
}
}
}
Here is a demo fiddle: https://jsfiddle.net/Cains/owarL5p1/

Answer 1

As li are inline items, make them vertically middle, and make a as block elements because height width won't work on inline elements.
.icons {
>li {
display: inline-block;
padding: 0;
vertical-align:middle; /*** added this ***/
>a, svg {
height: 50px;
width: 50px;
line-height: 50px;
font-size: 1.8em;
text-align: center;
border-radius: 50%;
color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0px 2px rgba(255, 255, 255, 0.56);
display:block; /*** added this ***/
}
.fab {
background-color: black;
}
}
}
https://jsfiddle.net/dk8eLcfm/
Edit: after #TemaniAfif comment.
Though above solution also worked, but I agree with Temani afif's point that, we can give vertical-align:top to svg, as it's also an inline element and can remove display block from a.
.icons {
>li {
display: inline-block;
padding: 0;
vertical-align:middle;
>a, svg {
height: 50px;
width: 50px;
line-height: 50px;
font-size: 1.8em;
text-align: center;
border-radius: 50%;
color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0px 2px rgba(255, 255, 255, 0.56);
svg{
vertical-align:top;
}
}
.fab {
background-color: black;
}
}
}
https://jsfiddle.net/2bcamf86/1/

Answer 2

You can simply use display: flex to ul.icons
ul.icons.other { display: flex; }