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

Question

I'm trying to add an <input type="reset"> with a Font Awesome icon.

I can achieve this with a hyperlink or button but if I go down that route I need to use jQuery/JS to clear the form, which I'm trying to avoid for the time being.

I'm curious to whether it's possible to achieve the same results. Please see the JSFiddle to see what I mean.

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>

If there's no other way I will implement a jQuery solution.

Answer 1

<input> is self-closing tag, it's not allowed to have any other elements inside it.

Here are all the 3 possible options of doing it as inline icon.

JsFiddle demo

1. wrap the <i> and <input> button into a <span> tag, with some custom styles.

<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"> - recommended .

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

3. use <a> anchor tag + 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" />

By adding value=" Clear" you can add the X icon. f00d is the icon HEX/whatever, which I got from inspecting the elements (checking the ::before 's content). You might have to look into some additional styling, but it will work. Just remember to set the font.