javascript - 中心输入框和 Font Awesome 图标

Question

其他人也问过类似的问题，但我似乎在努力将 Font Awesome 图标与输入框垂直对齐。当你不使用大小来增加 Font Awesome 图标时它工作正常，但一旦你输入 fa-3x 或类似的东西，就会添加 margin-top。

有没有人有什么想法？

简单的例子是:

<div>
    <i class='icon icon-3x icon-camera'></i>
    <span id="inputfield">
      <input type="text" value="input here">
    </span>
</div>

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#inputfield{
    line-height: 30px;
    float: left;
}

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<form>
<fieldset>
<legend><i class="fa fa-user" aria-hidden="true"></i></legend>
<input type="text" class="something">
</fieldset>
</form>