How to put icon inside input using Awesome Font?

Navigation
6

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

Butitlookslikethis:

What is the best way to put button within input ?

HTML : 

<form>
<input type="search" />
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
    
asked by anonymous 20.10.2014 / 02:53

3 answers

11

Does it serve with a bit of CSS "on 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 centralize the lens on the line with ease;

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

    
20.10.2014 / 04:00
7

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

/* 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>
    
20.10.2014 / 04:06
4
  

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

I found the solution in Use Awesome Icon in Placeholder and text-align: right; only for placeholder? . Set the source of placeholder to 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">
    
20.10.2014 / 03:25
Function within another CSS DIV diagonal