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:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
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.
ベストアンサー1
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.