Wordpress Search Form - Replace "Search" text with icon

Question

I'm trying do a few customizations to the wordpress default search form and I would like to replace the text "Search" in the value="Search" string with an icon.

Currently I have the following form:

<form role="search" method="get" id="searchform" class="searchform" action="//example.com/">
<div class="box">
   <div class="container-1">
      <input type="text" value="" name="s" id="s" placeholder="Search..." />
      <input type="submit" id="searchsubmit" value="Search" />
   </div>
</div>
</form>

How can I put in the following icon instead? <i class="fa fa-search"></i>

Answer 1

Here is a bit of a workaround, I replaced the input with button, removed value completely

<form role="search" method="get" id="searchform" class="searchform" action="//example.com/">
<div class="box">
   <div class="container-1">
      <input type="text" value="" name="s" id="s" placeholder="Search..." />
      <button type="submit" id="searchsubmit" />
           <span class="icon"><i class="fa fa-search"></i></span>   
      </button>
   </div>
</div>
</form>

Form seems to work just fine ..