[解決済み] 箇条書きに Font Awesome アイコンを使用し、単一のリストアイテム要素で使用する

質問

Font Awesome(フォントオーサム)を使用できるようにしたいのですが。 http://fortawesome.github.com/Font-Awesome/ ) のアイコンを CMS の順序なしリストの箇条書きとして使用できるようにしたいです。

CMSのテキストエディタは生のHTMLしか出力しないので、要素やクラスを追加することができません。

つまり、以下のようなマークアップの場合にアイコンを表示することになります。

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

Font Awesomeが別のfont-family属性を必要とする場合、別の要素が必要になるという問題がまず考えられる。

これは純粋な CSS を使用して可能ですか? あるいは、jQuery のようなものを使用して、各リスト項目の先頭に要素を追加する必要がありますか?

背景画像のフォールバックを使用できることは承知していますが、可能であればFont Awesomeを使用できれば最高です。

どのように解決するのですか？

解決方法です。

http://jsfiddle.net/VR2hP/

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

ここでは ブログ記事 で、このテクニックを詳しく説明しています。