html - 在输入元素中使用超棒的字体图标

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

基于此评论:

Actually I want to put eye in input field

您可以检查下一个选项:

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