如何垂直放置超棒字体图标？

Question

如何将字体真棒图标垂直居中在div容器中？我正在使用flexbox，实际上已经尝试了一个小时。就是这样

如何使图标和按钮都垂直居中？

这是我的代码：

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;
}

谢谢！