title: Adding icons to input forms, and starting the input after the icon.
body: <p>This will be a simple question for some of you but I am not the best with CSS and styling, I much prefer backend development. Basically I am styling a login form, and I want it to look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/MwxHT.png" alt="enter image description here"></p>
  
  <p>the background, sign in button are all good. simples.</p>
  
  <p>I have used some CSS and can fit an icon into the input, but when the user starts off typing, it types over the icon. What I want to do is have the icon section seperated and the user startes typing after the green line.</p>
  
  <pre><code>#password {
  
      background-image:url('../images/pw_icon.png');
      background-repeat:no-repeat;
      height: 30px;
  }
  </code></pre>
  
  <p>That is the CSS I have so far. I have seen this done but can't find any examples after a few Google searches. </p>
  
  <p>Can anyone direct me to an example or have some words to point me in the correct direction?</p>