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 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>

Answer 2

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

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

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

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

2 个答案: