align font-awesome icon in the middle - html

Question

Im using font awesome icons. Somehow i cant seem to get them in vertically aligned in the middle.
The white part has to be in the middle of the black part. I made a pen using codepen. https://codepen.io/kevin-bobsen/pen/qKZKRX
I tried:
vertical-align:middle;
text-align:center;
still not working.

Answer 1

Well you can use align-items:center with display:inline-flex for your solution like i did in following code. Please have a look
#main {
height:400px;
width:600px;
border:1px solid black;
margin:0 auto;
}
#pic{
width:300px;
height:100%;
float:left;
}
#bio{
width:300px;
height:100%;
float:right;
background:grey;
}
#avatar{
width:100%;
height:50px;
margin-left:30px;
margin-top:50px;
display:inline-block;
}
#avatar img{
width:50px;
height:50px;
border-radius:360px;
}
#avatar span{
font-size:18px;
margin-left:30px;
position:absolute;
margin-top:15px;
}
#icons{
width:90%;
height:30px;
display:inline-block;
margin-left:5%;
font-size:15px;
margin-right:5%;
background:red;
}
#icons i{
background:black;
color:white;
text-align:center;
height:100%;
display: inline-flex;
align-items: center;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div id="main">
<div id="pic">
</div>
<div id="bio">
<div id="avatar">
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">keVin#1234</span>
</div>
<div id="icons">
<i class="fab fa-accusoft"> </i>
<i class="fab fa-accusoft"> </i>
<i class="fab fa-accusoft"> </i>
</div>
</div>
</div>
</div>

Answer 2

Add line-height to your #icons id:
#icons i {
line-height: 30px;
}

Answer 3

Modify #icons i by adding line-height:30px
#icons i {
background: black;
color: white;
text-align: center;
height: 100%;
line-height: 30px;
}