CSS HTML

How to include an icon in a submit input of HTML

February 17, 2022

How to include an icon in a submit input of HTML

In this article we are going to learn how to include an icon in a submit input of HTML forms, with a somewhat unusual and easy technique.

how to include an icon in a submit input of HTML cover

Hey you programmer, ok? Let’s learn how to insert icons into inputs!

Firstly, it is necessary to clarify that it is not so practical to add an icon to an input tag, as they do not support internal HTML manipulation.

That is, we cannot add new elements inside an input tag

So we run this technique by making a small change, the input would be a submit type button

And the button tag accepts HTML so we can insert an icon inside and do any submit with icon

First we need to import the icon library in our head tag:

<head>
 <title>Icon in a submit input</title>
 <meta charset="utf-8">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"> 
</head>

See the example:

<form>
 <div>
  <input type="text" name="name" placeholder="Insert your name">
 </div>
 <div>
  <button type="submit">Send<span class="material-icons">send</span></button>
 </div>
</form>

This is the HTML of our example and you can see that we have already solved the problem:

But let’s make some adjustments to the CSS to make the form more professional:

body {
 margin: 50px;
 font-family: Helvetica;
}

div {
 margin: 20px;
}

input {
 padding: 5px 15px;
 width: 280px;
 box-sizing: border-box;
}

button {
 background-color: lightblue;
 color: #FFF;
 border: none;
 height: 30px;
 line-height: 30px;
 width: 140px;
 position: relative;
 cursor: pointer;
}

span.material-icons {
 font-size: 18px;
 position: absolute;
 right: 15px;
 top: 6px;
}

And so we have a simulation similar to some forms that use the icon-in-input technique, see:

Also notice that we use an icon font called Material Icon, which is free

You can use it in your projects too! See their website here

Conclusion

In this article we learned the possibility of include an icon in a submit input

As said before, we changed the input to a button, as it makes the HTML maintenance much easier and avoids unnecessary workarounds

Because the operation remains the same, once the button has the type of submit

Then just add an icon font of your choice, in this case we use Material Icon

And we create the icon element inside the button and position it according to our need

Want to learn more about HTML and CSS? Click here!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x