Html 如何将 Font Awesome 图标添加到 <input> 按钮中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30577777/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add Font Awesome icon into <input> button?
提问by ZeroBased_IX
I'm trying to add an <input type="reset">with a Font Awesome icon.
我正在尝试添加<input type="reset">带有 Font Awesome 图标的 。
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 JSFiddleto see what I mean.
我很好奇是否有可能达到相同的结果。请参阅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>
If there's no other way I will implement a jQuery solution.
如果没有其他方法，我将实现一个 jQuery 解决方案。
回答by Stickers
<input>is self-closing tag, it's not allowed to have any other elements inside it.
<input>是自闭合标签，里面不允许有任何其他元素。
Here are all the 3 possible options of doing it as inlineicon.
以下是将其作为内联图标执行的所有 3 种可能选项。
1.wrap the <i>and <input>button into a <span>tag, with some custom styles.
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.use <button type="reset">- recommended.
2.使用<button type="reset">-推荐。
<button class="btn btn-warning" type="reset">
<i class="fa fa-times"></i> Clear
</button>
3.use <a>anchor tag + javascript
3.使用<a>锚标签+javascript
<a href="javascript:document.getElementById('myform').reset();" class="btn btn-warning">
<i class="fa fa-times"></i> Clear
</a>
回答by MortenMoulder
https://jsfiddle.net/a6s58Luj/3/
https://jsfiddle.net/a6s58Luj/3/
<input type="reset" class="NEWCLASS btn btn-warning" value=" Clear" />
By adding value=" Clear"you can add the X icon. f00dis 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.
通过添加，value=" Clear"您可以添加 X 图标。f00d是图标 HEX/whatever，这是我从检查元素（检查::before内容）中得到的。您可能需要研究一些额外的样式，但它会起作用。只记得设置字体。
