CODEWITHSUNDEEP
htmlcss
Arjit
Arjit

Reputation: 59

How to add 2 fa-fa icon inside textbox

How we can add two fa-fa icon inside single input textbox. When I apply my code at my input it show like mentioned below. My Code previews

What is my mistake. Please fix my issue sir..

My code is :

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

Upvotes: 1

Views: 3592

Answers (2)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32172

Now you can modify to your html and some style sheet apply to this like this

user position relative or absolute like this below example

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

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

You can wrap input in div and use pseudo:

Learn about pseudo:https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Use code below to see charters onclick eye icon (using 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>

Upvotes: 1

Related Questions