CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
ZeroBased_IX
ZeroBased_IX

Reputation: 2727

How to add Font Awesome icon into <input> button?

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.

Upvotes: 17

Views: 60536

Answers (5)

M.L.
M.L.

Reputation: 129

Nest the input inside it's own label, and hide the input, and apply the font-awesome class to that label:

<label for="myButton" class="fa fa-times"><input id="myButton" type="button" hidden></label>

Clicks on labels get passed on to their inputs so long as the for and id attributes match and are unique in the DOM. You might want to re-add some of your own button-like styling and a cursor pointer, for example.

Upvotes: 0

Pranav M
Pranav M

Reputation: 78

If you need this inside a form, you cant make type="reset".

The best method I would say is, wrap the input element with label and apply all CSS to label. Any click on label will trigger input element also.

<label classname="all css of your button">
   <input type="submit" value="submit">
   <i class="fa fa-times"></i>  
</label>

Upvotes: 0

OsowoIAM
OsowoIAM

Reputation: 77

This worked for me combining fa classes and unicode inside the input tag 

 <input type='button' class='btn btn-default fas fa-share-alt' style='background-color:white; color:black;' value='&#xf0c5; Copy' onclick='myFunctionCopy($x)'>

 </div>

Upvotes: 1

Stickers
Stickers

Reputation: 78686

<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>

Upvotes: 30

MortenMoulder
MortenMoulder

Reputation: 6648

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

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

By adding value="&#xf00d; Clear" you can add the X icon. f00d is 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.

Upvotes: 6

Related Questions