Put icon inside input element in a form

Question

How do I put an icon inside a form\'s input element?

Answer 1

A simple and easy way to position an Icon inside of an input is to use the position CSS property as shown in the code below. Note: I have simplified the code for clarity purposes.

1. Create the container surrounding the input and icon.
2. Set the container position as relative
3. Set the icon as position absolute. This will position the icon relative to the surrounding container.
4. Use either top, left, bottom, right to position the icon in the container.
5. Set the padding inside the input so the text does not overlap the icon.

#input-container {
  position: relative;
}

#input-container > img {
  position: absolute;
  top: 12px;
  left: 15px;
}

#input-container > input {
  padding-left: 40px;
}