gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 07:22:22 25 4
gpt4 key购买 nike

我将我的网站从 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 它不再工作了,是否有任何解决方案或变通方法?非常感谢!

最佳答案

已更新 答案:

在看到这种现象出现在其他地方后,我深入挖掘并发现您可以仍然在 &#xf082; 的值中使用 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 中的按钮。您还必须连接按钮以在单击时执行您希望它执行的任何操作。)

关于css - FontAwesome v5 - 使用输入将图标添加到按钮中(来自 FA v4 的方法不再有效),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50159144/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com