将Fontawesome-icon与w3输入字段放入同一行

Question

So I was working on a webpage as I ran into this problem over here. I wanted to create my first form with w3.css (not bootstrap), which worked perfectly fine. But after trying multiple times to add a fa -Fontawesome-Icon in front of my text input field (the height of the fa-icon matches the height of the text input, they are both in the same row), I´m now asking you guys in the community out there -
How can I get the Fontawesome-Icon to the same height and same row/line of a text input field?
Here´s my code:

 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> 

How can I get this working?
Thanks for all answers in advance, as always,
- 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> 

This does the trick. There are better ways but this is the base. You can remove or adapt the expand effect. You can also use position absolute on the icon and padding on the container.

Answer 2

The problem is that the input element inherits display: block .w3-input class. You can overwrite this by simply giving an id to the element and setting display: inline . Add those:

#inline-input {
    display: inline;
}

*

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

Edit: Also remove <p></p> tags.