1

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

Devmix
  • 1,599
  • 5
  • 36
  • 73
  • So before I write this out as an answer, is wrapping the input inside a container, and having the icon inside that same container a viable solution? – Joe Nov 27 '18 at 20:09
  • @Joe I would prefer not to use a container. I just don't want to add more html elements – Devmix Nov 27 '18 at 20:13
  • I could be wrong, but you might not be able to do what you're looking for. FontAwesome relies on the :before pseudo class, and self-closing elements such as an doesn't allow for these elements. My solution would be to put the input in a container, along with the , and then style the container to look like your input field (border, background color, etc). – Joe Nov 27 '18 at 20:15
  • https://stackoverflow.com/questions/19285640/font-awesome-icon-inside-text-input-element – Martin Vlček Nov 27 '18 at 20:20

1 Answers1

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/

Joe
  • 1,792
  • 1
  • 16
  • 25
  • I would prefer to use content: "\f06a"; and not having to add an extra html element like "" – Devmix Nov 27 '18 at 20:26
  • 1
    You could probably place that as an :after on the .formField div and then style it the same as I have the .fas styled – Joe Nov 27 '18 at 20:29
  • Thank you for your help! – Devmix Nov 27 '18 at 20:53
  • Did it work? The I'm trying to work out how to get the font-family to work right, because I have a pro license, and I'm not used to working in the free version. – Joe Nov 27 '18 at 20:54
  • theres one issue. The font awesome icon is always present event after user enters a text in placeholder – Devmix Nov 27 '18 at 20:58
  • You'd need to add some javascript to this. I'd suggest having it add a class to the container for any empty field. that class is used in the css :after to display the icon, and then have the JS remove the class if the field has content in it. – Joe Nov 27 '18 at 21:01
  • I think that this is not working anymore. – jaclerigo Aug 21 '23 at 08:45