如何在表单字段前添加图标 附CSS与hook.tpl代码

总共两步，修改模板结构+补充对应CSS样式即可，不需要额外引入复杂组件。

第一步：修改hook.tpl模板结构 #

给姓名、地址、手机号三个输入框外层增加包裹容器，同时在输入框前插入图标占位元素，修改后的三个输入项代码如下：

<div class="crow">
  <label for="quickbuy_name">{l s='Your name' mod='quickbuy'}:</label>
  <div class="qb-input-wrap">
    <span class="qb-input-icon qb-icon-name"></span>
    <input type="text" class="qb_name qb-input-field form-control" id="quickbuy_name" name="qb_customer_name" value="{$qb_name|escape:'html':'UTF-8'}" />
  </div>
</div>

<div class="crow">
  <label for="quickbuy_address">{l s='Your address' mod='quickbuy'}:</label>
  <div class="qb-input-wrap">
    <span class="qb-input-icon qb-icon-address"></span>
    <input type="text" class="qb_address qb-input-field form-control" id="quickbuy_address" name="qb_address" value="{$qb_address|escape:'html':'UTF-8'}" />
  </div>
</div>

<div class="crow">
  <label for="quickbuy_phone">{l s='Your phone number' mod='quickbuy'}: <sup>*</sup></label>
  <div class="qb-input-wrap">
    <span class="qb-input-icon qb-icon-phone"></span>
    <input type="text" class="qb_phone qb-input-field form-control" id="quickbuy_phone" name="qb_phone" value="{$qb_phone|escape:'html':'UTF-8'}" />
  </div>
</div>

其他模板代码（GDPR选项、按钮区域等）保持原样不用改。

第二步：在front.css中补充对应样式 #

把下面的CSS代码追加到front.css文件末尾即可，逻辑和你现有提交按钮加购物车图标的写法完全一致：

/* 输入框包裹层，作为图标定位的父容器 */
body .qb-form .qb-input-wrap {
  position: relative;
}

/* 调整输入框内边距，给左侧图标留出空间，避免输入文字被遮挡 */
body .qb-form .qb-input-wrap .qb-input-field {
  width: 100%;
  height: 40px;
  padding-left: 45px;
  box-sizing: border-box;
  border: 1px solid #ABADB3;
}

/* 图标通用样式，固定在输入框左侧 */
body .qb-form .qb-input-wrap .qb-input-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 100%;
  background: #f0f0f0;
  border-right: 1px solid #ABADB3;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

/* 分别给三个字段配置对应图标，替换成你自己项目里的图标路径即可 */
body .qb-form .qb-input-wrap .qb-icon-name {
  background-image: url('../img/user-icon.png');
}
body .qb-form .qb-input-wrap .qb-icon-address {
  background-image: url('../img/address-icon.png');
}
body .qb-form .qb-input-wrap .qb-icon-phone {
  background-image: url('../img/phone-icon.png');
}

调整说明 #

• 图标建议准备16*16px大小的PNG格式文件，存到你项目的img目录下，和现有购物车图标放一起就行，路径按实际存放位置修改
• 如果你项目里已经引入了Font Awesome等图标库，不需要单独做背景图，直接给qb-input-icon加上对应图标类名，微调下图标居中样式即可
• 输入框高度、图标区域宽度、内边距数值都可以根据你的设计稿需求微调，不影响核心逻辑
• 把输入框宽度设为100%加box-sizing是为了适配移动端，不会出现小屏幕下输入框溢出表单容器的问题

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