は、私はそうのようなボタンにfontawesomeアイコンを追加していボタン

Question

の上に配置アイコンに上マージンを追加することはできません：

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

問題はかなり右に見えないアイコンです。高すぎるピクセルですが、調整する方法がわかりません。余白とパディングもボタンを移動するため、何も変更されません。垂直方向の配置で再生すると、それが変更されますが、それでもピクセルは数ピクセルあり、完全なピクセル配置が必要です。

アイコンを下げる/上げるにはどうすればよいですか？

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の隣にあなたのラッパーを入れて、それはトリックを行う必要があり、入力の行の高さを合わせるheightとposition: absoluteに変更した場合：

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

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

を

入力の高さを合わせるという利点もありますので、試行錯誤して上マージンを推測する必要はありません。