Icons inside input text field - html

Question

I have a problem. I want to create a input text field with icons inside of the code.
I want to have my icons inside of the input text field. Unfortunately my CSS style didn't work. With others code the icons disappeared. I hope you can help me. Thank you in advance. Please see below for my code.
HTML
<div class="col-md-6 login-form">
<h3>Los gehts</h3>
<div class="form_login">
<div class="form-group">
<input type="text" id="email_field" placeholder="Email *">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div class="form-group">
<input type="password" id="password_field" placeholder="Passwort *">
<i class="fa fa-lock" aria-hidden="true"></i>
</span>
</div>
<div class="form-group">
<button type="submit" class="btnSubmit" onclick="signIn()">Login</button>
</div>
<!--
<div class="form-group">
Forget Password?
</div> -->
</div>
</div>
CSS
.login-container {
margin-top: 5%;
margin-bottom: 5%;
text-align: center;
margin: auto;
padding-bottom: 5%;
}
.login-form {
padding: 5%;
text-align: center;
margin: auto;
}
.login-form h3 {
text-align: center;
color: #333;
}
.login-container form {
padding: 10%;
text-align: center;
display: inline-block;
position: relative;
width: 100%;
z-index: 1;
margin-bottom: 10px;
}
.btnSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
border: none;
cursor: pointer;
}
.btnLogout {
margin-top: 1rem;
border-radius: 1rem;
cursor: pointer;
color: #fff;
background-color: #0062cc;
text-align: center;
display: inline-block;
border: none;
margin-bottom: 10px;
}
.btnLogout:hover {
background-color: #0575ec;
}
.login-form .btnSubmit {
font-weight: 600;
color: #fff;
background-color: #0062cc;
}
.login-form .ForgetPwd {
color: #0062cc;
font-weight: 600;
text-decoration: none;
}
.loggedin-div {
text-align: center;
padding-bottom: 5%;
}

Answer 1

You need to create a div with border that imitate a input border. Then, you need to create the text input at the left and add this code: <input type="image" src="yourimagefile.jpg">
I hope I help you.

Answer 2

If you want something to float somewhere else, you can use a combination of position:relative; and top/left with CSS. For instance, let's add an id to that login button and make it our icon...
<div class="form-group" id="submit">
<button type="submit" class="btnSubmit" onclick="signIn()">Login</button>
</div>
Then some styling...
#submit {
top:-21px;
left:228px;
position:relative;
width:100px;
}
And what we get, then, is an icon floating over the input field. Working Demo.
Works for me. Before:
After:
Here's an example with the blank <i> elements (converted to <img> so we could see something, as they had no href): Working Demo.