title: proper CSS for generating a checkmark li that works cross-browser
body: <p>I'm using the following CSS to add checkmarks before my <code>&lt;li&gt;</code>list items:</p>
  
  <pre><code>ul.checkmark li:before {
      content:"\2713\0020";
  }
  </code></pre>
  
  <p>And then in the HTML:</p>
  
  <pre><code>&lt;ul class="checkmark"&gt;
     &lt;li&gt;Learn the keyboard at your own pace&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Works great in Safari, Firefox and Chrome, but displays "freak out boxes" on IE8. </p>
  
  <p>Safari:
  <img src="https://i.stack.imgur.com/4OPJ6.png" alt="alt text"></p>
  
  <p>IE8:<img src="https://i.stack.imgur.com/PPtJy.png" alt="alt text"></p>
  
  <p>Is there a portable way to specify a good-looking checkmark that will work in all the major browsers?</p>
  
  <p><strong>EDIT Solution</strong>:
  I ended up using a variation on meder's answer below:</p>
  
  <pre><code>ul.checkmark li {
      background:url("../checkmark.gif") no-repeat 0 50%;
      padding-left: 20px;
  }
  
  ul.checkmark {
      list-style-type: none;
  }
  </code></pre>