如何在Odoo 15登录密码表单中为fa-eye图标添加内边距

针对Odoo 15登录表单中密码模块的fa-eye图标右侧空间不足的问题，不建议直接修改fontawesome-all.css核心文件（易被版本更新覆盖，且样式优先级可能不足），推荐通过自定义样式规范解决：

1. 创建自定义CSS文件 #

在你的模块目录下新建static/src/css/login_custom.css，添加以下样式代码：

/* 确保密码容器为相对定位，让图标相对于容器精准定位 */
.form-group.field-password {
    position: relative;
}

/* 调整眼睛图标的右侧位置，增加留白空间 */
.toggle-main-password::before {
    right: 6%; /* 将原4%改为更大的值，图标左移后右侧自动留出空间 */
    /* 也可直接添加右侧外边距实现：margin-right: 8px; */
}

2. 在XML中引入自定义CSS #

修改你的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>

<!-- 引入自定义登录样式文件 -->
<template id="custom_login_assets" inherit_id="web.assets_frontend">
    <xpath expr="." position="inside">
        <link rel="stylesheet" href="/你的模块名称/static/src/css/login_custom.css"/>
    </xpath>
</template>

关键说明 #

• 始终使用自定义样式而非修改第三方库核心文件，避免Odoo版本更新后丢失修改内容
• 可根据视觉需求调整right属性值或margin-right的像素数，精准控制图标右侧留白大小
• 若样式未生效，可尝试提升选择器优先级，例如使用#wrapwrap .login_form .toggle-main-password::before作为选择器

内容的提问来源于stack exchange，提问作者Andromeda