Use font-awesome icon inside input element - html

Question

I have div element which inside has a span element and inside this one I have an i element, but the i tag goes out of the span and div elements.
Actually I want to put eye icon in the input field.
This is my current code, what should I do?
.fa-eye {
float: right;
display: flex;
}
.fa-eye {
position: absolute;
z-index: 5;
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="eye">
<span>
<i class="fa fa-eye"></i>
</span>
<input placeholder="term">
</div>

Answer 1

Based on this commentary:
Actually I want to put eye in input field
You can check the next alternatives:
(1) If you want to use a font-awesome icon like a placeholder for the input, then you can use the Unicode Cheatsheet. In the next example I show you how to do this:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="text" class="fa" placeholder=" term">
(2) In the other hand, if you want to have a fixed static icon inside the input, then you can go with something like this:
.input-icon {
position: absolute;
left: 3px;
color: rgb(0, 128, 255);
/* Vertically center the icon in the input */
top: calc(50% - 0.5em);
}
#myInput {
padding-left: 25px;
}
.custom-wrapper {
position: relative;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="custom-wrapper">
<input type="text" placeholder="term" id="myInput">
<i class="fa fa-eye input-icon"></i>
</div>

Answer 2

If you are using the position: absolute you need to decide which element is position: relative. Also, you need to decide where is the position of the "child" will be (for example where I want to put the left side).
And one last thing, you don't need to use the float: left/right when you are using positions.
Take a look at the next code:
.eye{
position: absolute;
}
.fa-eye {
position: relative;
left: 143px;
display: flex;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span >
<input class="eye" placeholder="term">
<i class="fa fa-eye"></i>
</span>