How to add padding to fa-eye in a password form (Odoo XML)

Question

I want to add some extra spaces to my password form in the login form after the fa-eye icon because it's looks too overhang at the right.

I've tried to use some padding in the fontawesome-all.css but it doesn't work. Here is my code: login.xml

    <template id="inherit_login_layout" inherit_id="web.login">
        <xpath expr="//div[@class='form-group field-password']" position="replace">
            <div class="form-group field-password">
                <label for="password">Password</label>
                <input type="password" placeholder="Password" name="password" id="password" t-attf-class="form-control #{'form-control-sm' if form_small else ''}" required="required" autocomplete="current-password" t-att-autofocus="'autofocus' if login else None" maxlength="4096"/>
                <span toggle="#main-password-field" class="fa fa-fw fa-eye field-icon-main-password toggle-main-password"></span>
            </div>
        </xpath>
    </template>

fontawesome-all.css

.fa-eye: before {
  position: absolute;
  color: #000;
  top: 28%;
  right: 4%;
}

By the way, I'm using Odoo 15 web module.

Any help would be very appreciated. Thanks.

Answer 1

Padding would not work since the pseudo-element, eye , has an absolute position, thus the margin and the padding would not work. I would instead suggest:

<div class="form-group field-password">
       <label for="password">Password</label>
       <div class="input-div">

                <input type="password" placeholder="Password" name="password" id="password" t-attf-class="form-control #{'form-control-sm' if form_small else ''}" required="required" autocomplete="current-password" t-att-autofocus="'autofocus' if login else None" maxlength="4096"/>
                <span toggle="#main-password-field" class="fa fa-fw fa-eye field-icon-main-password toggle-main-password"></span>
       </div>
</div>


.input-div{
width:100%;
position:relative;
}
    .fa-eye {
      position: absolute;
      color: #000;
      top: 28%;
      right: 15px;
    }
//try removing ::before or adding double Colin before before text 

Answer 2

First, be sure that the wrapper has position: relative property. Then, just play with right positioning of pseudo element.

.field-password {
    position: relative;
}

.fa-eye::before {
    position: absolute;
    color: #000;
    top: 28%;
    right: 4%;
}