title: display error icon in form using background-image
body: <p>I have a form that whenever someone enters information incorrectly it displays a message, I also want an error icon to appear next to the error text. I added span tags for the error message and gave it a .error icon class in CSS. I added a background-image in the selector but it is not appearing when I preview in the browser. I inspected the code and I can't even see the .error icon class in the code. I tried adding &nbsp; between the span tags which was something I saw in a form in a website but that didn't work.</p>
  
  <p>I am unsure of what method to use for inserting this icon as I know it is not good practice to repeat the same image src code for each section I want to apply the error icon to, hence why I am trying to use it as a background-image instead.</p>
  
  <p>Here is my code:
  <a href="http://jsfiddle.net/HNSM4/2/" rel="nofollow">http://jsfiddle.net/HNSM4/2/</a></p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;label for="name"&gt;
  &lt;span class="textStyle"&gt;Full Name*&lt;/span&gt;&lt;input type="text" id="name"&gt;&lt;br&gt;
      &lt;span id="nameMessage" class="message"&gt;&lt;span class"erroricon"&gt; &amp;nbsp;&lt;/span&gt;You must have a valid name&lt;/span&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.message{
  display: none;  
  }
  
  .erroricon {
  background-image:url('http://postimg.org/image/v6997l887/')
  }
  </code></pre>