How to center font-awesome icon vertically? [duplicate]

This question already has an answer here:

How can I center my font awesome icon vertically inside a div container? I'm using flexbox and have literally been trying for a hour. This is what happens...

How can I make it so that both the icon and the button are centered vertically?

Here is my code:

Html:

<div class="side-bar">
<div class="content">
<div class="button">
<form action="http://google.com">
<a href="your link here"> <i class="fas fa-ban fa-lg"></i></a>
<input type="submit" value="Ban Panel">
</form>
</div>
</div>
</div>


CSS:

.side-bar {
display: flex;
flex-direction: column;

overflow: auto;

width: 18%;
margin-top: 1px;
height: calc(99.9vh - 60px);

background-color: white;
box-shadow: 3px 0 10px -5px rgba(169,169,169,0.5);
}

.side-bar .content {
display: flex;
flex-direction: column;

width: 100%;
height: 100%;
margin-top: 5px;
}

.side-bar .button {
display: flex;
background-color: red;
}


Thanks!

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.