如何将 Font Awesome 图标添加到 <input> 按钮中？答案

【问题标题】：How to add Font Awesome icon into <input> button?如何将 Font Awesome 图标添加到 <input> 按钮中？
【发布时间】：2015-06-01 15:46:22
【问题描述】：

我正在尝试添加带有 Font Awesome 图标的 <input type="reset">。

我可以通过超链接或按钮来实现这一点，但如果我沿着这条路线走，我需要使用 jQuery/JS 来清除表单，我暂时试图避免这种情况。

我很好奇是否有可能达到相同的结果。请查看JSFiddle 了解我的意思。

Input Reset:
<input type="reset" class="btn btn-warning" value=""><i class="fa fa-times"></i> Clear</input>

<br/>
<br/>

Button:
<button class="btn btn-warning"><i class="fa fa-times"></i> Clear</button>

<br/>
<br/>

Anchor:
<a href="#" class="btn btn-warning"><i class="fa fa-times"></i> Clear</a>

如果没有其他方法，我将实现一个 jQuery 解决方案。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

<input>是自闭标签，里面不能有其他元素。

以下是作为 inline 图标的所有 3 种可能选项。

JsFiddle demo

1. 将<i> 和<input> 按钮包装到<span> 标记中，并带有一些自定义样式。

<span class="btn btn-warning">
    <i class="fa fa-times"></i> <input type="reset" value="Clear"/>
</span>

span > i {
    color: white;
}
span > input {
    background: none;
    color: white;
    padding: 0;
    border: 0;
}

2. 使用 <button type="reset"> - 推荐。

<button class="btn btn-warning" type="reset">
    <i class="fa fa-times"></i> Clear
</button>

3.使用<a>锚标签+javascript

<a href="javascript:document.getElementById('myform').reset();" class="btn btn-warning">
    <i class="fa fa-times"></i> Clear
</a>

【讨论】：

【解决方案2】：

https://jsfiddle.net/a6s58Luj/3/

<input type="reset" class="NEWCLASS btn btn-warning" value="&#xf00d; Clear" />

通过添加value="&#xf00d; Clear"，您可以添加X 图标。 f00d 是 HEX/whatever 图标，我通过检查元素（检查 ::before 的内容）得到。您可能需要研究一些额外的样式，但它会起作用。只要记住设置字体即可。

【讨论】：

哦，你也不必使用我创建的 NEWCLASS 类。这只是为了区别于其他按钮。
Snorlax 上的现货谢谢。我只需要弄清楚如何在按钮上使用我的默认字体以及字体真棒字体。注意它是如何剥离风格的。
我也看到了。不幸的是，我有 99.9% 的把握认为你无法做到这一点。你不能“只用一种字体做一半的文字，用另一种字体做另一半”。那是行不通的。这是一种有趣的按钮类型，但我会在心跳中使用 jQuery 来完成。
这是一个非常聪明的方法，顺便确保测试一下 FontAwesome 字体是否不会导致显示正常文本的任何其他问题。
是的。您可能希望将 font-family 更改为 font: normal normal normal 14px/1 FontAwesome;，就像原来的一样。