how to align custom icon without font awesome
<div class="top">
<ul>
<li class="a">
<div class="main">
<div class="sub-main">
<i class="facebook">
</i>
</div>
</div>
</li>
<li class="b">
<div class="main">
<div class="sub-main">
<i class="youtube">
</i>
</div>
</div>
</li>
<li class="c">
<div class="main">
<div class="sub-main">
<i class="instagram">
</i>
</div>
</div>
</li>
</ul>
</div>
.top {
display: inline-block;
ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
li {
display: inline;
position: relative;
.main {
display: inline-block;
border: 2px solid grey;
padding: .8rem;
border-radius: 50%;
position: relative;
z-index: -20;
background: #d6d6d6;;
.sub-main {
i{
height: 1.5rem;
width: 1.5rem;
display: block;
background-size: contain;
}
.facebook{
background-image: url('../../../../assets/socialicon/facebook (1).svg');
}
.youtube{
background-image: url('../../../../assets/socialicon/youtube.svg');
}
.instagram{
background-image: url('../../../../assets/socialicon/instagram.svg');
}
}
}
&.a {
}
&.b {
right: 1rem;
z-index: -21;
}
&.c {
right: 2rem;
z-index: -22;
}
}
}
}