Eureka! Classless form icons

A lot easier than I thought.

Icons on the left, icons on the right. And completely classless. 

I'm going to post the HTML code I expected to work. Tomorrow I will post the actual CSS. I have a bit of cleanup work to do (I use borders to give me visual clues for debugging purposes).

Before I post the code, I need to point out the "eureka" part of the title. I managed to work out the CSS code so that it works with or without labels. I will post two sets of HTML code. The first is what I started with (without labels), the second is with labels.

Here's the first set of HTML code:

<div>
  <div>
    <i class="fa fa-user fa-lg" aria-hidden="true"></i>
    <input type="text" id="name" name="name" placeholder="Your name">
    <i class="fa fa-check fa-lg" aria-hidden="true"></i>
  </div>
</div>

<div>
  <i class="fa fa-user fa-lg" aria-hidden="true"></i>
  <input type="text" id="name" name="name" placeholder="Your name">
</div>

<div>
  <input type="text" id="name" name="name" placeholder="Your name">
  <i class="fa fa-check fa-lg" aria-hidden="true"></i>
</div>

The next set is almost identical, only added labels. Here's the HTML:

<div>
  <label for="name">Text Input</label>
  <div>
    <i class="fa fa-user fa-lg" aria-hidden="true"></i>
    <input type="text" id="name" name="name" placeholder="Your name">
    <i class="fa fa-check fa-lg" aria-hidden="true"></i>
  </div>
</div>

<div>
  <label for="name">Text Input</label>
  <i class="fa fa-user fa-lg" aria-hidden="true"></i>
  <input type="text" id="name" name="name" placeholder="Your name">
</div>

<div>
  <label for="name">Text Input</label>
  <input type="text" id="name" name="name" placeholder="Your name">
  <i class="fa fa-check fa-lg" aria-hidden="true"></i>
</div>

Check again tomorrow for the CSS, here's a teaser ... this is what the final product looks like:

and, a PS ... I have added code to make it easy for you to remove the right icon background ...