使用Font Awesome图标为项目符号点，使用单个列表项元素 [英] Using Font Awesome icon for bullet points, with a single list item element

问题描述

我们希望能使用Font Awesome（ http://fortawesome.github.com/Font-Awesome） / ）图标作为CMS中无序列表的项目符号。

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.

CMS上的文本编辑器仅输出原始HTML，

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>

我可以看到，如果Font Awesome需要一个不同的font-family属性的第一个问题，

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

这是否可以使用纯CSS？或者我必须使用像jQuery这样的东西将元素附加到每个列表项的开头？

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.

推荐答案

解决方案：

http://jsfiddle.net/VR2hP/

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.

这篇关于使用Font Awesome图标为项目符号点，使用单个列表项元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！