Font Awesome fonts in input fields

So, day 3 trying to simply add font-awesome fonts to the input field.

Seems pretty basic right? Easy? 

.fa .fa-user

Simple CSS modifications are absolutely KILLING this App.

Any ideas how I can do this?

 

From the users point of view, this might seem pretty basic, yes.
But adding icons to form elements is NOT at all EASY or standardized.

Each layout framework (like Bootstrap, UIkit...) provides it's own workaround which includes framework SPECIFIC javascript and additional html elements (technicly an input element cannot have a child element like an icon). So the icon is always a sibling (additional html element) and its position (seemingly inside the input) is always forced with CUSTOM css.

If you have an application that stresses on design (like a page builder), placing icons is a pretty basic requirement.
In a application that focuses on functionallity (like a form builder), it is a second level citizen.

You're right, that Visforms can improve on the design and usability side and I would be very happy to have the time to do it.
But actually this is a huge task and sadly Font Awesome is only one icon-font.

Regards,
Aicha

I wanted to follow up on this because I found something that may be of benefit to someone else:

First off, once I had selected Bootstrap 4, an option for "control group class" appeared that I had not seen before.

In that field, I put "fa fa-user"

I've given my form a specific class ".BasicContactForm"
In my custom CSS file, I add the following:

This may not work for everyone, but it just might get you in the ballpark.

Thanks a lot!