Rails+Devise中如何实现FontAwesome图标与输入框同行显示

问题现状 #

目前登录功能运行正常，需要实现输入框内嵌FontAwesome图标、图标与输入框同行展示的效果，预期效果如下：

当前代码运行后图标与输入框分行显示，实际效果如下：

问题原因 #

当前代码存在3个核心问题：

• 图标与输入框为同级独立元素，Bootstrap默认的form-control类是宽度100%的块级元素，会自动占满整行，将图标挤到单独一行
• 仅给邮箱字段添加了测试用对勾图标，密码字段未配置对应图标
• 没有配套布局样式控制图标定位，也没有给输入框预留图标位置的内边距，就算强行放同行也会出现输入文字和图标重叠的问题

修复步骤 #

1. 调整ERB模板结构 #

将每个图标和对应的输入框包裹在统一的容器中，替换测试图标为对应业务图标，修改后表单部分代码如下：

<div class="container">
  <%= form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "form-signin"}) do |f| %>
    <h2 class="form-signin-heading">Please sign in</h2>
    
    <%#= f.label :email, 'Email Address', class: 'sr-only' %>
    <!-- 邮箱输入框+图标容器 -->
    <div class="input-icon-wrapper">
      <i class="fa-solid fa-envelope"></i>
      <%= f.email_field :email, autofocus: true, class: 'form-control', placeholder: 'Email Address' %>
    </div>

    <%= f.label :password, 'Password', class: 'sr-only' %>
    <!-- 密码输入框+图标容器 -->
    <div class="input-icon-wrapper">
      <i class="fa-solid fa-lock"></i>
      <%= f.password_field :password, autocomplete: "off", class: 'form-control', placeholder: 'Password' %>
    </div>

    <% if devise_mapping.rememberable? -%>
        <div class="checkbox">
            <label><%= f.check_box :remember_me %> Remember me</label>
        </div>
    <% end %>

    <%= f.button "Sign in", class: 'btn btn-lg btn-primary btn-block' %>
  <% end %>
  <%= render "devise/shared/links" %>
</div>

2. 添加配套布局样式 #

将以下CSS代码添加到项目全局样式文件或登录页专属样式文件中：

/* 图标输入框组合容器 设为相对定位作为图标定位基准 */
.input-icon-wrapper {
  position: relative;
  margin-bottom: 15px;
}
/* 输入框增加左侧内边距，避免输入文字被图标遮挡 */
.input-icon-wrapper .form-control {
  padding-left: 2.5rem;
  box-sizing: border-box;
}
/* 图标绝对定位到输入框左侧，垂直居中 */
.input-icon-wrapper i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  z-index: 10;
}

调整说明 #

• 请先确认项目已正确引入FontAwesome资源，否则图标无法正常加载
• 可根据实际UI需求调整left、padding-left的数值控制图标与输入框边缘的间距，修改color属性自定义图标颜色
• 如果出现图标垂直对齐偏移，微调top属性和transform的偏移值即可

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