Sometimes, we want to add Font Awesome icon inside text input element with CSS.
In this article, we’ll look at how to add Font Awesome icon inside text input element with CSS.
How to add Font Awesome icon inside text input element with CSS?
To add Font Awesome icon inside text input element with CSS, we add the icon to a span.
For instance, we write
<input name="txtName" id="txtName" />
<span class="fa fa-info-circle errspan"></span>
to add a span with the icon after the input.
Then we write
.errspan {
float: right;
margin-right: 6px;
margin-top: -20px;
position: relative;
z-index: 2;
color: red;
}
to make the span movable with position: relative;.
Then we move it to the position we want by setting the margins.
We make it stay on the right side of the input with float: right;.
Conclusion
To add Font Awesome icon inside text input element with CSS, we add the icon to a span.
