如何在按钮中添加字体Awesome图标?

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.

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

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.

如果没有其他方法，我将实现jQuery解决方案。

2 个解决方案

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

以下是作为内联图标进行此操作的3种可能的选项。

JsFiddle demo

JsFiddle演示

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

1。使用一些自定义样式将和按钮包装到标记中。

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

2。使用 <按钮类型="重置"> -推荐。

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

3. use <a> anchor tag + javascript

3所示。使用锚标记+ javascript

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

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

通过添加价值= " & # xf00d;清除“您可以添加X图标。f00d是图标HEX/随便什么，是我检查元素(检查:before的内容)得到的。您可能需要研究一些额外的样式，但它会起作用。记住要设置字体。

#1