使用Font Awesome图标作为项目符号点,具有单个列表项元素

Question

我们希望能够使用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会很棒.

Answer 1

解:

http://jsfiddle.net/VR2hP/

ul li:before {    
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -15px;
    color: #f00;
}

这是一篇博客文章,深入介绍了这项技术.

Answer 2

新的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>

根据这个(新)网址:http://fontawesome.io/examples/#list

Answer 3

我想建立上面的一些答案,并在其他地方给出,并建议使用绝对定位以及:之前的伪类.上面的很多例子(以及类似的问题)都在使用自定义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备忘单上获取用于CSS内容的ISO值.只需使用前缀为反斜杠的最后4个字母数字.因此[]变得\f058