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

Question

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

我可以使用超链接或按钮来实现这一点，但如果我沿着这条路走下去，我需要使用 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 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> anchor 标签+javascript

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