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



Map JSON objects to class

There are some online websites that will convert a given JSON string to respective classes. This will make developer's life easy. Here is some of the online websites that does the job for you.

1. JsonToCsharp

2. site24x7

3, JsonFormatter

4. wtools

Cheers,

Samitha