текст центра в кнопке

Question

Я создал эту кнопку, однако я не могу, кажется, центрировать текст. Я установил высоту линии, но, похоже, не работает, что не так?

https://jsfiddle.net/DTcHh/12048/

CSS

a.round { 
    font-size: 18px; 
    font-weight: 300; 
    line-height: 35px; 
    padding: 10px 16px; 
    border-radius: 6px; 
    border: 1px solid #000; 
    font-size: 18px; 
    color: #000; 
    font-weight: 600; 
    background-color: transparent; 
    float: left; 
    margin-right: 20px; 
    -webkit-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    margin-bottom: 180px; 
} 

#icon-buy { 
    margin-right: 10px; 
    font-size: 35px; 
} 

Answer 1

Я думаю, что нужно выровнять <i>, чтобы получить вид вы после этого.

#icon-buy { 
    margin-right: 10px; 
    font-size: 35px; 
    vertical-align: middle; 
} 

JSfiddle Demo

Answer 2

Другим решением этого может быть:

/* setting button as relative position*/ 
a.round{  
line-height:36px; 
position:relative; 
padding: 10px 20px 10px 60px; 
} 

#icon-buy{ 
font-size: 35px; 
position:absolute; 
left:20px; 
} 

проверка выход здесь: https://jsfiddle.net/kumaramit24apps/yLsqq1o2/1/