Используйте иконку шрифта внутри элемента ввода

Question

У меня есть div элемент, внутри которого есть элемент span, а внутри него есть элемент i, но тег i выходит из элементов span и div.

На самом деле я хочу поместить значок глаза в поле ввода

Это мой текущий код, что мне делать?

.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

На основании этого комментария:

На самом деле я хочу поставить глаз в поле ввода

Вы можете проверить следующие варианты:

(1) Если вы хотите использовать для ввода значок font-awesome, например, placeholder, вы можете использовать Unicode Cheatsheet .В следующем примере я покажу вам, как это сделать:

<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) С другой стороны, если вы хотите иметь фиксированный статический значок внутри ввода, то вы можете пойти с чем-то вроде этого:

.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

Если вы используете позицию: абсолютная, вам нужно решить, какой элемент является позицией: относительная.Кроме того, вам нужно решить, где будет находиться позиция «ребенка» (например, где я хочу поставить левую сторону).

И последнее: вам не нужно использовать float: влево / вправо, когда вы используете позиции.

Посмотрите на следующий код:

    .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>