html - 将 Fontawesome-icon 与 w3-input 字段放在同一行

Question

当我在这里遇到这个问题时，我正在处理一个网页。我想用 w3.css(不是 bootstrap)创建我的第一个表单，它工作得很好。但是在多次尝试在我的文本输入字段前添加一个 fa-Fontawesome-Icon 之后(fa-icon 的高度与文本输入的高度相匹配，它们都在同一行), 我现在问你们社区里的人 -
如何让 Fontawesome-Icon 达到与文本输入字段相同的高度和相同的行/行？
这是我的代码:

body {
  background-color: black;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<form class="w3-container w3-white">
  <div class="w3-row-padding">
    <div class="w3-col m12">
      <i class="fa fa-envelope-o fa-2x fa-fw" aria-hidden="true"></i><p><input class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 50%;"></p>
    </div>
  </div>
</form>

我怎样才能让它工作？
一如既往地提前感谢所有的回答，
- 搜索解决方案

Answer 1

body {
  background-color: black;
}
.input-icon{
   float:left;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<form class="w3-container w3-white">
  <div class="w3-row-padding">
    <div class="w3-col m12">
      
<p>
<i class="fa fa-envelope-o fa-2x fa-fw input-icon" aria-hidden="true"></i>
<input class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 50%;">
</p>
    </div>
  </div>
</form>

这就是诀窍。有更好的方法，但这是基础。您可以删除或调整扩展效果。您还可以在图标上使用绝对位置，在容器上使用填充。