title: Storing images in custom data attributes
body: <p>I have a <code>h3</code> tag thats wrapping a <code>img</code> tag and the text. It works but I feel like its a really bad idea to do. Example:</p>
  
  <pre><code>&lt;h3&gt; 
    &lt;img src="dir/to/image.jpg" alt="icon" /&gt;
    Heading text
  &lt;/h3&gt;
  </code></pre>
  
  <p>I was reading about HTML5 custom data attributes (<code>data-*</code>) and then I remembered that I saw a tutorial on some website a while back ago that was using custom data attributes to store the icons and showing them beside the text (<code>data-icon</code>). This is exactly what I need.</p>
  
  <p>Problem is I can't figure out how to output the image. How would I do this? Possibly with jQuery? </p>