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

ul 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

我想在上面和其他地方给出的一些答案的基础上，建议将绝对定位与：before伪类一起使用。上面的许多示例（以及类似的问题）都在使用自定义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速查表上获取ISO值以用于CSS内容。只需使用以反斜杠为前缀的最后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>

如果尝试此代码后找不到它，则说明您没有正确包含该库。根据他们的网站，您应该包括以下库：

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

还可以在其网站CSS Tricks上查看异想天开的Chris Coyier关于图标字体的帖子。

这是他的截屏视频，同时也谈到了如何创建自己的图标字体。

@Tama，您可能需要检查以下答案：使用Font Awesome图标作为项目符号

基本上，您可以仅使用CSS来完成此操作，而无需FontAwesome和此处的其他答案所建议的额外标记。

换句话说，您可以使用在初始文章中提到的相同基本标记来完成所需的工作：

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

谢谢。

我的解决方案使用标准<ul>和<i>内部<li>

  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>

此处演示

在Font Awesome 5中，可以使用纯CSS来完成，如上述某些答案中所做的一些修改。

ul {
  list-style-type: none;
}

li:before {
  position: absolute;
  font-family: 'Font Awesome 5 free';
          /*  Use the Name of the Font Awesome free font, e.g.:
           - 'Font Awesome 5 Free' for Regular and Solid symbols;
           - 'Font Awesome 5 Brand' for Brands symbols.
           - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
          */
  content: "\f1fc"; /* Unicode value of the icon to use: */
  font-weight: 900; /* This is important, change the value according to the font family name
                       used above. See the link below  */
  color: red;
}

没有正确的字体粗细，它将仅显示一个空白方块。

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define