css - 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

已更新 答案:

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

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

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

Font Awesome 5 也有一个 SVG with JavaScript 方法，但我认为没有任何方法可以让这个特性与 SVG/JS 一起工作，所以如果你想在 <input> 中使用 unicode 实体FA5 的值，坚持使用 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 中的按钮。您还必须连接按钮以在单击时执行您希望它执行的任何操作。)