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.
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.
To add icon inside the input element the <i> tag and <span> tag are used widely to add icons on the webpages. To add any icons on the webpages or in some specific area, it needs the fontawesome link inside the head tag. The fontawesome icon can be placed by using the fa prefix before the icon's name.
Use placeholder="" in your input. You can find unicode in FontAwesome page http://fontawesome.io/icons/ . But you have to make sure add style="font-family: FontAwesome;" in your input. Save this answer.
<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.
JsFiddle demo
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. use <button type="reset">
- recommended.
<button class="btn btn-warning" type="reset">
<i class="fa fa-times"></i> Clear
</button>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With