How to place bootsrap icon inside input control to hide and show password

1
$this->Form->control("User.password", [ 'Type'=>'password', 'Class' =>'form-control', 'After' =>' '

Icon did not create inside the control. How do i place the icon side my input control please?

2

Nothing in the code you’ve shown would cause an icon to happen. Is there something missing?

Also, I believe that option names are case-sensitive and all lower case, so it should be type instead of Type, etc.

3

Sorry about the code. I have edited as below.

<?php echo $this->Form->control("User.password", [ 'id' => 'pass_log_id', 'type'=>'password', 'Class' =>'form-control', 'After' =>' '; ?>
4

I still see nothing here about an icon… Maybe you need to wrap your code in ``` before and after here to stop it from reformatting things? As for your problem, maybe you need to add 'escape' => false to your options array? Just a guess until we can see the full actual code. (And I see you’ve changed “type” to lower case, but that applies to all options, so class and after and so on as well.)

5

I guess he is expecting a eye symbol at the end of the input to hide/show the password being input in the password which is not default browser/HTML behavior.

This involves custom CSS and JS to achieve this behavior. I would recommend googling this issue.

6

Thanks for your reply.
I have this sample implemented below

<link href="[https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css](https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css)" rel="stylesheet"/>
<link href="[https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css](https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css)" rel="stylesheet"/>
<script src="[https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js](https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js)"></script>
<div class="form-group">
    <label class="mt-2" for="txtPasswordLogin">Password</label>
    <div class="password-input-container">
        <input type="password" class="form-control password-input" id="txtPasswordLogin" placeholder="Enter Password">
        <i class="toggle-password fa fa-eye"></i>
    </div>
</div>



With the below script 

<script>