HTML button with search icon?

I'm trying to create a search button containing nothing but the magnifying glass search icon.

Code is below

<div class="searchbox">
<form>
    <span><input type="text" class="search square" placeholder="Search...">
            <input type="button" value="&#xf002;">

</span>
</form>
</div>

After reading all the posts on the topic I could find I've also tried the following 3 options in line 4

<input type="button" value="filepath/icon.png">
<i class="icon-search icon-2x">
<i class="icon-search"></i></button>

as well as this html

<input type="button" value="Search" class="button_add">

with this css

input.button_add {
    background-image: url(filepath/icon.png); 
    background-color: transparent; 
    background-repeat: no-repeat;  
    background-position: 0px 0px;  
    border: none;           
    cursor: pointer;        
    height: 50px;           
    width: 50px;
    padding-left: 16px;     
    vertical-align: middle;     
}

None of them have worked. I've also updated font awesome based on these tutorials http://cirquedumot.com/font-awesome/ and http://www.youtube.com/watch?v=BdyI6T-_7ts

Any help on what I'm doing wrong would be much appreciated.