FontAwesome v5 - 使用输入添加图标到按钮（FA v4的方法不再起作用）

Question

我将我的网站从FontAwesome v4.7升级到v5.0。一切正常，除了一件事 - 我不能再使用按钮（值）中的FontAwesome图标了。我使用了这个技巧：

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

在CSS中我起诉了这个：

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

原始来源：https://stackoverflow.com/a/11703274/7736126

然而，现在使用FontAwesome v5它已经无法使用了，是否有任何解决方案或解决方法？非常感谢你！

Answer 1

更新答案：

在其他地方看到这种现象后，我深入挖掘并发现你可以仍然在{{1}的值中使用unicode实体（如）元素。但是，您还必须设置至少一个CSS属性，该属性强制浏览器使用CSS中定义的自定义字体重绘控件，而不是浏览器的默认字体。这感觉就像一个黑客，但它也是attested here，例如。

因此，假设您已经在<input>上正确设置了font-family，那么最后一次调整可能只是设置<input>（非默认值），或background-color。

Here's a CodePen使用带有CSS的FA5 Webfonts演示了这一点。

Font Awesome 5也有一个使用JavaScript方法的SVG，但我不认为有任何方法可以使用这个功能来使用SVG / JS，所以如果你想在{中使用unicode实体使用FA5的{1}}值，坚持使用CSS的Webfonts。

ORIGINAL 答案：

你可以做一些与other question you linked中接受的答案类似的事吗？像这样：

border: 1px solid

这里是working example on codepen that uses Webfonts with CSS。

here's a working example with the same markup that uses SVG with JS。

（注意：这只是演示了将图标添加到FA5中的按钮。您还必须连接按钮以执行您在单击时要执行的操作。）