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;
}

原始来源：

但是，现在使用 FontAwesome v5 它不再工作了，有什么解决方案或解决方法吗？非常感谢！

Answer 1

已更新答案：

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

因此，假设您已经在 <input> 上正确设置了 font-family，最后的调整可能只是设置类似 background-color 的内容（设置为非默认值), 或 border: 1px solid.

Here's a CodePen 用 CSS.

用 FA5 Webfonts 演示了这一点

Font Awesome 5 也有一个带有 JavaScript 方法的 SVG，但我认为没有任何方法可以让这个功能与 SVG/JS 一起使用，所以如果你想使用 unicode 实体在 FA5 的 <input> 值中，使用 CSS.

的 Webfonts

原创答案：

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

<button type="submit" class="btn btn-success">
    <i class="fab fa-facebook fa-lg"></i> Facebook 
</button>

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

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

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

FontAwesome v5 - 使用输入将图标添加到按钮中（来自 FA v4 的方法不再有效）

FontAwesome v5 - add icon into button with input (method from FA v4 is not working anymore)

css

button

font-awesome-5