w3の入力フィールドと同じ行にFontawesome-iconを取得

Question

私はここでこの問題に遭遇したので、私はウェブページで作業していました。私は完全にうまくいったw3.css（ブートストラップではない）で最初のフォームを作成したかったのです。しかし、テキスト入力フィールドの前にfa -Fontawesome-Iconを追加しようと複数回試した後（ファインアイコンの高さはテキスト入力の高さに一致しますが、それらは同じ行にあります）、私は今質問していますあなたはそこのコミュニティの人です -
Fontawesome-Iconをテキスト入力フィールドの同じ高さと同じ行/行にするにはどうしたらいいですか？
Here's私のコード：私はこの作業を取得するにはどうすればよい

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>

？事前にすべての答えを
おかげで、いつものように、
- SearchingSolutions

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>

これは、トリックを行います。より良い方法がありますが、これが基本です。エキスパンドエフェクトを削除または適用できます。コンテナのアイコンとパディングにposition absoluteを使用することもできます。

Answer 2

input要素がdisplay: block.w3-inputクラスを継承するという問題があります。要素にIDを与え、display: inlineを設定するだけで上書きできます。

#inline-input { 
    display: inline; 
} 

*

<input id = "inline-input" class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 50%;"> 

編集：それらを追加します。また<p></p>タグを削除します。