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

Question

我正在尝试使用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解决方案。

Answer 1

<input>是自动关闭标记，不允许在其中包含任何其他元素。

以下是将其作为内联图标的所有3种可能选项。

JsFiddle演示

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>

Answer 2

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

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

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