with the Font Awesome icon. I can achieve this w...">
Geek Answers Handbook

How to add an awesome font icon to an <input> button?

I am trying to add <input type="reset">with the Font Awesome icon.

I can achieve this with a hyperlink or button, but if I go off this route, I need to use jQuery / JS to clear the form that I am trying to avoid for now.

I am curious if the same results can be achieved. See JSFiddle to understand 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 is no other way, I will implement jQuery solution.

+4
source share
2 answers

<input> is a self-closing tag, it is not allowed to have any other elements in it.

Here are all three possible options for doing this as an inline icon .

Jsfiddle demo

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. <button type="reset"> - .

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

3. <a> anchor tag + javascript

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

https://jsfiddle.net/a6s58Luj/3/

<input type="reset" class="NEWCLASS btn btn-warning" value="&#xf00d; Clear" />

value="&#xf00d; Clear", X. f00d - HEX/-, ( ::before). , - , . .

+2

More articles:


All Articles