Hello Readers!

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.

background-image:url(.....);
background-repeat:no-repeat;
background-position:6px;

Fetch the input type with its id and give the above three properties in your CSS the way you want it.

USING POSITION

Position property has been a saviour in many many situations. The way things are easily resolved with this property always amazes me. It helps with this one too. Let us see how.

<div class="form-group">
    <div class="icon-addon addon-lg">
        <input type="text" placeholder="Email" class="form-control" id="email">
        <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
    </div>
</div>

.icon-addon {
    position: relative;
    color: #555;
    display: block;
}


.icon-addon.addon-md .glyphicon,
.icon-addon .glyphicon, 
.icon-addon.addon-md .fa,
.icon-addon .fa {
    position: absolute;
    z-index: 2;
    left: 10px;
    font-size: 14px;
    width: 20px;
    margin-left: -2.5px;
    text-align: center;
    padding: 10px 0;
    top: 1px
}

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.

OUTPUT :

Keep Coding!