字体真棒图标未与文本水平对齐

Question

我在这里查找了一些帖子，但到目前为止，没有一种解决方案有效。我将图标和文本标题放在同一行上，但是图标和文本在水平方向上并不完美。图标在中心线上方。到目前为止，这是我的代码。任何帮助表示赞赏

CSS

.titleDisplay
  display: flex // this make the text and icon on the same line

.iconStyle
  margin 0px
  padding-top: 0x
  display: inline-block
  justify-content: center !important
  text-align: bottom

<div className={myStyles.titleDisplay}>
  {"Test"}
</div>
<div className={myStyles.iconStyle}
  <i className="fa-circle-right fa-lg"></i>
</div>