Use font-awesome icon inside input element

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="&#xf06e; 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>