Css Can'；t在按钮上方的图标上添加上边距

我正在向按钮添加一个图标，如下所示：

#wrapper{
  text-align: center;
}
#wrapper:after{
  content: "\f0a9";
  font-family: 'FontAwesome';
  color: #000;
  font-size: 16px;
  margin-left: -30px;
}
#button{
  padding-right: 30px;
  height: 40px;
}

<div id="wrapper">
  <input id="button" type="submit" value="Download Now"/>
</div>

#包装器{
文本对齐：居中；
}
#包装工：之后{
内容：“\f0a9”；
字体系列：“FontAwesome”；
颜色：#000；
字体大小：16px；
左边距：-30px；
}
#钮扣{
右侧填充：30px；
高度：40px；
}

问题是图标看起来不太正确。它有几个像素太高了，但我不知道如何调整它。边距和填充也会移动按钮，因此不会改变任何内容。玩垂直对齐改变了它，但它仍然有几个像素，我想要一个像素完美的位置

---

如何降低/升高图标？

添加

位置：相对和<代码>顶部：3倍会将其向下移动几个像素


#包装器{
文本对齐：居中；
}
#包装工：之后{
内容：“\f0a9”；
字体系列：“FontAwesome”；
颜色：#000；
字体大小：16px；
左边距：-30px；
位置：相对位置；
顶部：3px；
}
#钮扣{
右侧填充：30px；
高度：40px；
}
添加
位置：相对和<代码>顶部：3倍会将其向下移动几个像素


#包装器{
文本对齐：居中；
}
#包装工：之后{
内容：“\f0a9”；
字体系列：“FontAwesome”；
颜色：#000；
字体大小：16px；
左边距：-30px；
位置：相对位置；
顶部：3px；
}
#钮扣{
右侧填充：30px；
高度：40px；
}
如果您将包装放在
输入旁边，并将其更改为
位置：绝对
，且
高度
与输入的行高度相匹配，则应执行以下操作：


#包装器{
文本对齐：居中；
}
#包装工：之后{
内容：“\f0a9”；
字体系列：“FontAwesome”；
颜色：#000；
字体大小：16px；
左边距：-30px；
位置：绝对位置；
线高：40px；
}
#钮扣{
右侧填充：30px；
高度：40px；
}
如果您将包装放在
输入旁边，并将其更改为
位置：绝对
，且
高度
与输入的行高度相匹配，则应执行以下操作：


#包装器{
文本对齐：居中；
}
#包装工：之后{
内容：“\f0a9”；
字体系列：“FontAwesome”；
颜色：#000；
字体大小：16px；
左边距：-30px；
位置：绝对位置；
线高：40px；
}
#钮扣{
右侧填充：30px；
高度：40px；
}