How to add Font Awesome icon inside text input element with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published.