如何将Font Awesome图标添加到< input>按钮？ [英] How to add Font Awesome icon into <input> button?

问题描述

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

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

我可以通过超链接或按钮来实现，但是如果我沿着那条路线走，我需要使用jQuery / JS来清除表单，这是我想避免的暂且。

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.

我很好奇是否有可能取得相同的结果。请参阅 JSFiddle 以了解我的意思。

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>

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

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

推荐答案

< input> 是自动关闭标签，不允许在其中包含任何其他元素。

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

以下是通过 inline 图标进行操作的3种可能选择。

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

JsFiddle演示

JsFiddle demo

1。将< i> 和< input> 按钮包装到一个< span> 标记，并带有一些自定义样式。

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。使用 < button type = reset> - 推荐 。

2. use <button type="reset"> - recommended.

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

3。使用< a> 锚标记+ javascript

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>

这篇关于如何将Font Awesome图标添加到< input>按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！