如何更改图标的间距？

Question

您好，

如何更改邮件图标的间距？它应与文本处于同一高度。

这是我的代码：

HTML：

<div id="Kontakt">
    <article class="kontakt">
         <ul>
             <li><i class="mail"></i><a href="mailto:contact@mail.at"> contact@mail.at</a></li>
             <li><i class="phone"></i> 0123 / 12345678</li>
         </ul>
    </article>
</div>

CSS：

#Kontakt {
    width: 100%;
    position: relative;
    top: 520px;
    background-color: #FDB913;
    height: 500px;
    text-align: center;
}

#Kontakt .kontakt ul { margin:80px 0 0 0; padding:0;}
#Kontakt .kontakt ul li { margin:0 0 20px 0; padding:0;}
#Kontakt .kontakt ul li a:hover { text-decoration:underline;}

.mail {
    font-size: 22px;
    padding-right: 3px;
}

.phone {
    font-size: 14px;
    padding-right: 3px;
}