Placing icon inside an input element

 Sometime icons inside an input element will give more User Experience to the viewer. Following code snippet shows how to put  font awesome icons in an input field.

CSS

<style>

        .input-icons i {

            position: absolute;

        }

          

        .input-icons {

            width: 100%;

            margin-bottom: 5px;

        }

          

        .icon {

            padding: 5x;

            min-width: 20px;

        }

          

        .input-field {

            width: 100%;

            padding:5px;

            text-align: center;

        }

    </style>

HTML

<div class="input-icons">

            <i class="fa fa-user icon"></i>

            <input class="input-field" type="text">

            <i class="fa fa-instagram icon"></i>

</div>




The output will be as follows




Cheers

Samitha