Невозможно добавить верхний край на иконку, расположенную над кнопкой

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> 

Проблема заключается значок выглядит не совсем верно. Это слишком много пикселей, но я не могу понять, как его настроить. Margin и padding перемещают кнопку так, чтобы она ничего не меняла. Воспроизведение с вертикальным выравниванием изменяет его, но его все еще несколько пикселей, и я хочу идеальное размещение пикселей.

Как снизить/увеличить значок?

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 соответствие высоту строки на вход в это должен сделать трюк:

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

Он также имеет дополнительное преимущество в соответствии с высотой ввода, поэтому вам не нужно использовать пробную версию и ошибку, чтобы угадать верхнюю границу.