Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to insert an icon in an input type?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 517
    Comment on it

    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!

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: