使用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会很棒。
解：
li:before { font-family: 'FontAwesome'; content: '\f067'; margin:0 5px 0 -15px; color: #f00; }
这是一篇博客文章 ，深入解释了这一技术。
新的fontawesome（版本4.0.3）使这真的很容易做到。 我们只需使用以下类：
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li> <li><i class="fa-li fa fa-check-square"></i>can be used</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li> <li><i class="fa-li fa fa-square"></i>default bullets in lists</li> </ul>
根据这个（新）的url： http : //fontawesome.io/examples/#list
我想build立在上面的一些答案和其他地方，并build议使用绝对定位以及：伪类之前 。 上面的许多例子（以及类似的问题）都使用了自定义的HTML标记，包括Font Awesome的处理方法。 这违背了原来的问题，并不是绝对必要的。
在这里演示
ul { list-style-type: none; padding-left: 20px; } li { position: relative; padding-left: 20px; margin-bottom: 10px } li:before { position: absolute; top: 0; left: 0; font-family: FontAwesome; content: "\f058"; color: green; }
基本上就是这样。 您可以在Font Awesome的Cheatsheet上获得用于CSS内容的ISO值。 只需使用最后4个带有反斜杠前缀的字母数字。 所以[]变成\f058
有一个如何在他们的例子页面上使用Font Awesome和无序列表的例子 。
<ul class="icons"> <li><i class="icon-ok"></i> Lists</li> <li><i class="icon-ok"></i> Buttons</li> <li><i class="icon-ok"></i> Button groups</li> <li><i class="icon-ok"></i> Navigation</li> <li><i class="icon-ok"></i> Prepended form inputs</li> </ul>
如果您在尝试此代码后无法find它，那么您没有正确包含该库。 根据他们的网站，你应该包括这样的图书馆：
<link rel="stylesheet" href="../css/bootstrap.css"> <link rel="stylesheet" href="../css/font-awesome.css">
还可以看看他的网站上的CSS技巧 图标字体的异想天开的克里斯Coyier的职位 。
这里是他的屏幕录像 ，以及如何创build自己的图标字体。
@Tama，你可能想检查这个答案： 使用Font Awesome图标作为项目符号
基本上你可以完成这个只使用CSS，而不需要额外的标记FontAwesomebuild议和其他答案在这里。
换句话说，您可以使用您在初始文章中提到的相同基本标记完成所需的工作：
<ul> <li>...</li> <li>...</li> <li>...</li> </ul>
谢谢。
我正在使用http://icomoon.io/它给你的选项只加载你需要的字体图标。; select你想要的图标，附加到图标的关键，并下载一个小字体，而不是整个真棒字体（这仍然是可怕的）。
这是我的实验： http : //jsfiddle.net/Annett/ZB7TK/
