title: Placing an icon beside the text of an H1 tag by using a span
body: <p>Here's the HTML I'm trying to use:</p>
  
  <pre><code>&lt;h1&gt;Order Not Paid&lt;span class="not-paid"&gt;&lt;/span&gt;&lt;/h1&gt;
  </code></pre>
  
  <p><em>Of course if there is a better way please say so.</em></p>
  
  <p>Currently since there is no text inside of the span, it seems the browsers are ignoring this tag. Firebug shows up grayed out when inspecting.</p>
  
  <p>When I place text in the span, the icon shows correctly.</p>
  
  <p>What CSS rule can I apply for this effect? Here's what I have so far (It's SASS, but easy to grasp):</p>
  
  <pre><code>h1 {
      font-size: 24px;
  
      span.not-paid {
          background-image: url('/Public/images/remove.png');
          background-repeat: no-repeat;
      }
  }
  </code></pre>
  
  <p>I'd like the icon to appear where the span is.</p>
  
  <p>Alternatively, is it kosher to do something like this? If so, I can settle with this as it looks good on IE8 and modern browsers.</p>
  
  <pre><code>&lt;h1&gt;Order Not Paid &lt;img src="@Url.Content("~/Public/images/remove.png")" alt="" /&gt;&lt;/h1&gt;
  </code></pre>