CODEWITHSUNDEEP
cssoverlayfont-awesome
afazolo
afazolo

Reputation: 382

Overlapping a font awesome icon inside a text field

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

Upvotes: 7

Views: 10601

Answers (3)

Kelderic
Kelderic

Reputation: 6687

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

enter image description here

Fiddle

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

Upvotes: 10

ethanpil
ethanpil

Reputation: 2522

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>

Upvotes: 0

Soltechy
Soltechy

Reputation: 87

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.

Upvotes: 0

Related Questions