时间戳

首页 > 解决方案 > FontAwesome v5 - 将图标添加到带有输入的按钮中（FA v4 中的方法不再起作用）

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

问题描述

我将我的网站从 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 它不再工作了，有什么解决方案或解决方法吗？非常感谢！

标签： cssbuttonfont-awesome-5

解决方案

更新答案：

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

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

这是一个 CodePen，它使用带有 CSS 的 FA5 Webfonts 演示了这一点。

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

原始答案：

你能做一些类似于你链接的另一个问题中接受的答案的事情吗？像这样：

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

这是一个使用带有 CSS 的 Webfonts 的 codepen 的工作示例。

这是一个使用 SVG 和 JS 的相同标记的工作示例。

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

推荐阅读