要为图标腾出空间，我已将占位符文本35px移动到了input的右侧；但是，当我开始在input字段中键入内容时，文本将从图标后面开始。
我尝试了一些谷歌搜索，但是我还没有找到答案。我见过的搜索结果都使用占位符，但这并不是我遇到的麻烦。
如何移动输入的文本，使其与占位符匹配？ （form-group__input）
.login {
background-color: $color-white;
width: 30vw;
position: absolute;
@include position-center;
padding: 20px;
}
.login h2 {
color: $color-gray;
font-weight: bold;
}
.login .form-group {
width: 80%;
margin: 10px auto;
position: relative;
}
.login .form-group .form-group__input {
background: none;
border: 1px solid gray;
padding: 10px;
border-radius: 6px;
width: 100%;
}
.login .form-group .form-group__input::placeholder {
padding-left: 35px;
}
.login .form-group__icon {
position: absolute;
left: 15px;
font-size: 22px;
color: gray;
top: 6px;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<section class="login">
<h2>Login</h2>
<div class="form-group">
<input type="email" placeholder="someemail@email.com" class="form-group__input">
<span class="form-group__icon"><i class="far fa-envelope"></i></span>
</div>
<div class="form-group">
<input type="password" placeholder="**********" class="form-group__input">
<span class="form-group__icon"><i class="fas fa-lock"></i></span>
</div>
<a href="Index.html" class="btn btn--blue">Log In</a>
<a href="Createaccount.html" class="btn btn--simple">Create account</a>
</section>