如何将Font Awesome图标设为submit输入框的值？无法修改生成的HTML

你遇到的问题其实很常见——input[type="submit"]的value属性是纯文本类型，直接放HTML实体（比如）不会被浏览器解析成图标，而且你又没法把input改成button标签，那咱们换个思路来实现：

步骤1：给按钮设置Font Awesome字体 #

首先要确保你的页面已经引入了Font Awesome的CSS文件，然后给目标submit按钮添加字体样式：

.btn-primary {
  /* 如果你用的是Font Awesome 5 Free版本，字体名是这个；Pro版本换成"Font Awesome 5 Pro" */
  font-family: "Font Awesome 5 Free", system-ui, sans-serif;
  font-weight: 900; /* Free版本的实心图标必须设置这个权重，否则显示不出来 */
}

步骤2：用Unicode字符直接设置Value #

不要用HTML实体，而是直接使用图标对应的Unicode转义字符来设置按钮的value。在JS里直接传入转义后的字符即可：

$(document).ready(function() {
  // 直接传入图标的Unicode字符，而不是HTML实体
  $('.btn-primary').val('\f0c7');
});

为什么之前的方法不行？ #

你之前用val('')，本质是给按钮的value属性设置了字符串，而浏览器只会把这个当作纯文本显示，不会解析成HTML实体对应的字符。只有当HTML源码里写这个实体时，浏览器才会解析，通过JS设置value属性时是不生效的。

这样设置后，按钮就会显示你想要的Font Awesome图标啦，完全不需要修改原来的input结构~

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