如何将 Font Awesome 图标添加到 按钮中？

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

我可以通过超链接或按钮来实现此目的，但如果我沿着这条路线走下去，我需要使用 jQuery/JS 来清除表单，这是我暂时试图避免的。

我很好奇是否有可能达到相同的结果。请参阅JSFiddle https://jsfiddle.net/a6s58Luj/看看我的意思。

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 解决方案。

<input>是自闭合标签，里面不允许有任何其他元素。

以下是所有 3 种可能的选择inline icon.

JsFiddle 演示 http://jsfiddle.net/vdfcf9k7/

1.包裹住<i> and <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. use <button type="reset"> - 受到推崇的.

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

3. use <a>锚标记 + javascript

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