Question

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

#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>

问题是图标看起来不太正确。它的几个像素太高但我无法弄清楚如何调整它。边距和填充也会移动按钮，因此它不会改变任何东西。使用vertical-align进行更改会改变它但仍有几个像素，我希望像素完美放置。

如何降低/升高图标？

Answer 1

添加position: relative;和top: 3px;会将其向下移动几个像素。

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="wrapper">
  <input id="button" type="submit" value="Download Now"/>
</div>

Answer 2

如果您将包装器放在input旁边并将其更改为position: absolute，并且height与输入的行高相匹配，那么应该可以解决这个问题：

＆＃13;

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

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<input id="button" type="submit" value="Download Now" /><span id="wrapper"></span>

＆＃13;

它还具有匹配输入高度的附加优势，因此您不必使用反复试验来猜测上边距。

无法在按钮上方的图标上添加上边距

2 个答案: