title: Using Font Awesome icon for bullet points, with a single list item element
body: <p>We'd like to be able to use a Font Awesome ( <a href="http://fortawesome.github.com/Font-Awesome/">http://fortawesome.github.com/Font-Awesome/</a> ) icon as a bullet point for unordered lists in a CMS.</p>
  
  <p>The text editor on the CMS only outputs raw HTML so additional elements/ classes cannot be added.</p>
  
  <p>This means displaying the icons when the mark up looks like this:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The first problem I can see if Font Awesome requires a different font-family attribute, which would require a separate element.</p>
  
  <p>Is this possible using pure CSS? Or would I have to append the  element to the beginning of each list item using something like jQuery?</p>
  
  <p>I realise we can use a fall back of a background image, but it would be great to use Font Awesome if possible.</p>