html - 如何在文本框中添加 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 中并使用伪:

了解伪:https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

使用下面的代码查看章程 onclick eye icon(使用 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>