Css – Using Font Awesome icon for bullet points, with a single list item element


We'd like to be able to use a Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) icon as a bullet point for unordered lists in a CMS.

The text editor on the CMS only outputs raw HTML so additional elements/ classes cannot be added.

This means displaying the icons when the mark up looks like this:

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

The first problem I can see if Font Awesome requires a different font-family attribute, which would require a separate element.

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?

I realise we can use a fall back of a background image, but it would be great to use Font Awesome if possible.

Best Solution



ul li:before {    
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -15px;
    color: #f00;

Here's a blog post which explains this technique in-depth.