How to add font awesome icon inside input field? [duplicate] - css

Question

This question already has answers here:
Font Awesome icon inside text input element
(25 answers)
Closed 4 years ago.
I have this code where I can add an image inside an input field (it works just fine). However I want to use an Font Awesome icon instead. Can anyone point me in the right direction? Here's what my code looks so far:
input.valid {
border-color: #28a745;
padding-right: 30px;
background-image: url('http://iconsetc.com/icons-watermarks/simple-black/bfa/bfa_exclamation/bfa_exclamation_simple-black_512x512.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: right center;
}
<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>
NOTE:
I'm trying to use this code: "\f06a" to insert an exclamation font awesome icon

Answer 1

So normally you add FontAwesome Icons either using the class structure such as:
fas fa-exclamation-circle
or you would use the content css style.
content: "\f06a";
The class system relies on the :before pseudo class, which does not work on self-closing HTML elements such as an input or a br tag
The content style also does not work on an input element
What I would do in something like this would be to wrap the input field in a container, add a FontAwesome element as the :after on the element.
<i class="fas fa-exclamation-circle"></i>
and then style my container to look like the input field, while removing some styles from the input field itself such as background color and border. You'll then need to work out the best way to have the FontAwesome icon side beside the form field.
Field HTML:
<form>
<label for="name">Name</label>
<div class="formField">
<input class="valid" type="text" name="name" />
</div>
</form>
Sample Styles
.formField{
border-color: #28a745;
padding-right: 30px;
position: relative;
}
input.valid{
background-color: transparent;
border: 0;
margin-right: 50px;
}
.formField:after{
position: absolute;
transform: translate(0,-50%);
right: 0;
top: 50%;
font-family: "Font Awesome 5 Pro";
content: "\f06a";
}
Depending on what FontAwesome license you have, you might need to change the font-family style to match what you need it to be.
You may need to adjust some of the styles to meet your needs, but this should give you something to start with.
JSFiddle:
https://jsfiddle.net/8jz9ngpu/