如何在文本框中添加2个fa-fa图标

Question

我们如何在单个输入文本框中添加两个fa-fa图标。当我在输入中应用代码时，如下所示。

我的错是什么。请解决我的问题先生。.

我的代码是：

<style>
.field-icon {
  float: right;
  margin-right: 6px;
  margin-top: -20px;
  position: relative;
  z-index: 1;
  cursor:pointer;
}
</style>

<div class="input_field">

<span>
    <i class="fa fa-lock" aria-hidden="true"></i>
</span>
    <input type="password" name="password" placeholder="Password" required/>
    
<span toggle="#password-field" class="fa fa-lg fa-eye field-icon toggle-password">
</span>

</div>

Answer 1

您可以将输入包装在div中并使用伪指令：

了解有关pseudo：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

使用下面的代码查看宪章onclick眼睛图标（使用Jquery）

$("i").click(function() {
 if($('.pass').attr('type')=='password' && $('.pass').val()!="")
    $('.pass').attr('type', 'text')
 else
    $('.pass').attr('type', 'password')
})

    #text i:after{
        font-family: 'FontAwesome';
        position: relative;
        left: -26px;
        content: "\f06e";
    }
    #text:before{
        font-family: 'FontAwesome';
        position: relative;
        right: -19px;
        top: 1px;
        content: "\f023";
    }
    #text input {
    text-align: center;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <div id="text">
     <input name="password" type="password" placeholder="password" class="pass">
     <i></i>
    </div>

Answer 2

您好，您现在可以修改html并使用一些样式表，例如

相对或绝对的用户位置，如下例所示

.input_field{
  position:relative;
}
.icon-sec{
  position:absolute;
  top:0;
  left:10px;
  bottom:0;
  background:red;
  width:20px;
}
.icon-sec.pwd{
  left:auto;
  right:10px;
}

.input_field .input-item{
  width:100%;
  box-sizing: border-box;
    padding: 0 45px;
} 

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input_field">

<span class="icon-sec">
    <i class="fa fa-lock" aria-hidden="true"></i>
</span>
    <input type="password" name="password" class="input-item" placeholder="Password" required/>
    
<span  class="icon-sec pwd" toggle="#password-field">
<i class="fa fa-lg fa-eye field-icon toggle-password" aria-hidden="true"></i>
</span>

</div>