重叠fontawesome图标输入IE

Question

I want to make a Font Awesome icon overlap to an input. This because i want the button to be the icon itself.

My solution works well in Firefox and Chrome, but it does not work in IE . This means that in IE the button is not clickable because it happens that the icon goes OVER the button.

This is the HTML:

<span>
   <input type="button"/>
   <i class="fa fa-camera-retro"></i>
</span>

CSS:

span {
    position: relative;
}

input {
    position: relative;
    background: none;
    border: none;
    z-index: 2;
    cursor: pointer;
}

i {
    position: absolute;
    left: 0;
}

The strange thing is that this code works well in JSFiddle.

UPDATE : I must use the input.

Answer 1

If you need a button (such as for a form), you can use:

<button><i class="fa fa-camera-retro"></i></button> 

Alternatively, try using a label pointing to the input if you absolutely must have the input element button:

<span>
   <input id="myButton" type="button"/>
   <label for="myButton" class="fa fa-camera-retro"></label>
</span>

Answer 2

Try this: <a href = "#"><i class="fa fa-camera-retro"></i></a>

Using a link instead of a button might solve your problem.