Many a times, we must have seen a magnifying glass (search icon) in a search type input box. There are many input types in various web pages that have an icon relating to that input type. It makes them look appealing but doing this gets a little cumbersome. I will be describing two ways to do this.
USING BACKGROUND IMAGE
Background-image make things really easy. Just use the icon as a background image and position it accordingly. Give the property background-repeat to 'no-repeat' and it's done.
In this, the containing form (input type) which is meant to contain the icon is given position "relative" and the icon is set to position "absolute". The icon is then set to its desired position with just standard CSS.