How to put icon inside input using Font Awesome?

Question

I’m trying to make a search field with an icon using Font Awesome, I want it to look like this:

but he gets like this:

What is the best way to put the button within the input?

HTML:

<form>
<input type="search" />
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>

Answer 1

Serves with a little CSS "in hand"?

Using Bootstrap:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

<div class="col-xs-6">
  <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">
      <button class="fa fa-search" style="background:transparent;border:none"></button>
    </span>
  </div>
</div>

Using CSS

.submit-lente {
  position:absolute;
  top:0; right:0;
  z-index:10;
  border:none;
  background:transparent;
  outline:none;
}

.submit-line {
  position: relative;
  width: 200px;
}

.submit-line input {
  width: 100%;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<div class="submit-line">
  <input type="text" />
  <button class="submit-lente" type="submit">
    <i class="fa fa-search"></i>
  </button>
</div>
</form>

Considerations:

Using line-height you can center the lens on the line easily;

This is just a sketch to show one of the possibilities, but it deserves greater care in alignments and all the rest.

Answer 2

Another option. Formatting the element lupa as a div, inserting the chart using \f002 and using the pointer indicating that there is an event - the alert is the event demonstration click.

/* campo do formulário */
input{
   border:#ddd solid 1px;
   float:left;
   padding:5px 20px 5px 5px
}

/* formatação do elemento */
#lupa{
   float:left;
   margin:3px 0px 0px -20px;
   cursor:pointer
}

/* formatação do conteúdo  */
#lupa:after{
   font-family:FontAwesome;
   font-size:14px;
   content:"\f002"
}

<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css' type='text/css'>

<input type="text" />
<div id="lupa" onclick="alert('ok :)');"></div>

Answer 3

^{This answer does not solve the problem presented. It is similar because the icon is inside the input but it does not serve as a button to trigger the search.}

I found the solution in Use Font Awesome Icon in Placeholder and text-align: right; only for placeholder?. Set the source of placeholder as FontAwesome and use the search icon code in its value:

input[type=text] {
  width: 188px;
  height: 16px;
  font-family: serif;
}
/* webkit solution */
::-webkit-input-placeholder { 
  font-family: FontAwesome;
  text-align:right; 
}
/* mozilla solution */
input:-moz-placeholder { 
  font-family: FontAwesome;
  text-align:right; 
}

<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css' type='text/css'>
<input type="text" placeholder="Procurar &#xF002;" value="" tabindex="1" autocomplete="off">