FontAwesome v5按钮input添加图标问题：原v4方法失效

嘿，我之前帮别人排查过一模一样的问题！FontAwesome v5在字体架构上做了不小的调整，这直接导致你v4时代的方法失效了，别着急，咱们一步步来解决：

核心原因 #

v4里所有图标都打包在一个名为FontAwesome的字体文件里，但v5把图标拆分进了不同的字体族（比如免费图标、品牌图标、Pro版图标），而且必须指定正确的字体权重才能渲染出图标，这俩点就是问题所在。

解决方案1：适配v5的CSS调整（继续用input标签） #

你原来的CSS里的字体名称和权重都不对，咱们修改一下：

首先，确保你加载的FontAwesome v5资源包含了品牌图标（Facebook图标属于品牌类）。

然后更新你的CSS代码：

.fa-input {
  /* 品牌图标要用这个字体族 */
  font-family: "Font Awesome 5 Brands", 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* 品牌图标必须指定这个权重才能显示 */
  font-weight: 400;
}

你的input标签可以保留原来的写法，因为Facebook的Unicode 在v5里没有变化：

<input title="Log in via Facebook account" type="button" onclick="URL;" class="button_facebook fa-input" value="&#xf082; Facebook" />

如果是用非品牌类的图标（比如solid风格的图标），字体族要改成"Font Awesome 5 Free"，权重设为900，比如：

.fa-input-solid {
  font-family: "Font Awesome 5 Free", 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 900;
}

解决方案2：改用button标签（更推荐，语义化更好） #

其实FontAwesome v5更推荐用<button>配合<i>标签的方式，这样不用折腾字体和Unicode，维护起来更简单：

<button title="Log in via Facebook account" onclick="URL;" class="button_facebook">
  <i class="fab fa-facebook"></i> Facebook
</button>

这种方式不需要额外的.fa-input CSS，只要你加载了v5的样式文件，图标就能正常显示，而且后期换图标也更方便，直接改<i>的类名就行。

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