嘿，这个需求我碰到过好几次了，核心就是把原来的<input type="button">换成能容纳图标的<button>标签，同时完整迁移原按钮的所有属性和功能，具体操作看下面：

因为<input>是自闭合标签，没法直接嵌套图标元素，所以我们用<button>标签来替代——它既能包含子元素（也就是Font Awesome图标），又能完全兼容原按钮的表单行为和自定义属性：

替换后的代码 #

把原来的input按钮：

<input type='button' value='+' class='qtt' field='quantity' />

改成：

<button type="button" class="qtt" field="quantity">
  <i class="fas fa-plus-square"></i>
</button>

关键注意事项 #

• 完整保留原有属性：把原input的class、自定义属性field都原封不动移到<button>上，这样原来绑定的JS事件（比如通过.qtt选择器监听点击）会自动生效，不用修改JS逻辑
• 务必设置button的type为button：一定要加type="button"，否则如果按钮在<form>标签里，会默认触发表单提交行为，破坏原有功能
• 移除value属性：原来的value='+'已经不需要了，我们用图标替代了文字提示
• 可选样式优化：如果不想保留浏览器默认的按钮边框、背景，让图标看起来更像纯点击图标，可以加一点CSS：

button.qtt {
  border: none;
  background: transparent;
  cursor: pointer;
  /* 可根据需求调整图标大小、颜色 */
  font-size: 1.2rem;
  color: #333;
}

特殊情况处理 #

如果你的JS代码是通过精确选择input[type="button"].qtt来获取元素的，那需要把选择器调整一下，比如：
原来的JS：

document.querySelector('input[type="button"].qtt').addEventListener('click', function() {
  // 原有逻辑
});

改成：

// 要么精准匹配button标签
document.querySelector('button.qtt').addEventListener('click', function() {
  // 原有逻辑
});
// 或者更稳妥的，直接用类选择器（不管标签类型）
document.querySelector('.qtt').addEventListener('click', function() {
  // 原有逻辑
});

这样改完之后，图标按钮就完全继承了原按钮的所有功能，视觉上也变成了你想要的Font Awesome样式~

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