html – 如何在按钮中添加Font Awesome图标？

发布时间：2020-12-14 18:49:04 所属栏目：资源来源：网络整理

导读：我正在尝试添加 input type =“reset”带有Font Awesome图标. 我可以通过超链接或按钮来实现这一点,但如果我沿着那条路走下去,我需要使用jQuery / JS来清除表单,我暂时想避免使用它. 我很想知道是否有可能取得同样的结果.请参阅JSFiddle以了解我的意思. Inpu

我正在尝试添加< input type =“reset”>带有Font Awesome图标.

我可以通过超链接或按钮来实现这一点,但如果我沿着那条路走下去,我需要使用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解决方案.

解决方法

<输入>是自动关闭标签,不允许在其中包含任何其他元素.

以下是将其作为内联图标的所有3种可能选项.

JsFiddle demo

1.包裹< i>和<输入>按钮进入< 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!