使用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/

 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个带有反斜杠前缀的字母数字。 所以[&#xf058;]变成\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/它给你的选项只加载你需要的字体图标&#x3002; select你想要的图标,附加到图标的关键,并下载一个小字体,而不是整个真棒字体(这仍然是可怕的)。

这是我的实验: http : //jsfiddle.net/Annett/ZB7TK/