Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
627 views
in Technique[技术] by (71.8m points)

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:

<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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Solution:

http://jsfiddle.net/VR2hP/

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...