Overlapping a font awesome icon inside a text field

Question

In an overlapping like the one below, how to prevent the large space between the title and text field?

.icon-link-mail {
  position: relative;
  left: 485px;
  top: 29px;
  padding: 8px 8px 7px 8px;
  z-index: 2
}

<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
  <label for="sendto">
              <a href="#"><i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i></a>
              <input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
              </label>
</form>

Result can be seen in this fiddle

Answer 1

Personally I'd just use a pseudo-element, but if you wish to use the <i> icon, then we can do that a lot better by using position:absolute instead of position:relative. Adding position:relative just moves the icon, but leaves the space that it would have taken. position:absolute won't leave that space.

We need to make sure to set the parent contain (label) to position:relative though, so that the icon will be absolutely positioned in relation to the parent instead of the entire page.

#mail_form label {
  position: relative;
}

.icon-link-mail {
  position: absolute;
  z-index: 2;
  right: 0;
}

<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
  <label for="sendto">
        <a href="#"><i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i></a>
        <input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
     </label>
</form>

Result

Fiddle

http://jsfiddle.net/Ay6Hw/4/

Answer 2

I find the best way to do this is to just use an image. Here would be the code:

.search input {
padding-left: 17px;
background: #FFF url("../images/icon_search.png") left no-repeat;
}
.search input:focus {
background:#fff;
}

This will also remove the background image on focus giving the user a better experience overall.

Answer 3

Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.

1. Create an <input> tag followed by a standard <i> tag with the icon you need.

2. Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.

3. (Optional) You can make the icon active, to perhaps submit the data, via standard JS.

See the three code snippets below for the HTML / CSS / JS.

Or the same in JSFiddle here: Example: http://jsfiddle.net/ethanpil/ws1g27y3/

$('#filtersubmit').click(function() {
  alert('Searching for ' + $('#filter').val());
});

#filtersubmit {
  position: relative;
  z-index: 1;
  left: -25px;
  top: 1px;
  color: #7B7B7B;
  cursor: pointer;
  width: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>