There is a lot of usages we see for input elements with an icon before it. In this article, I’m going to create an HTML Input with an icon before it. But before going to code let me show you the final output first.
The following is what we want to achieve.
First, create a container
div for the input box. I’ll write a class named
icon-input-container which would contain the textbox and the icon element.
Now, I’ll style the input element by creating a CSS class for it. Check class named
It’s time to create a container for the icon beside the textbox. I’ll try to create the container so that it goes just before the element. I have created a class and named it
Inside the icon container, I’m going to put the icons. You can change the icon and add the image URL according to your requirements to match your HTML input element. Have a look at class
icon-lock which is an icon for a password box for my case.
You can find the whole example for the HTML input element in Github Repo.